小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior

一、自定义组件

1.创建组件小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第1张图片

 2.组件引用--局部引用小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第2张图片

 3.组件引用--全局引用小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第3张图片

 4.组件和页面的区别小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第4张图片

 5.修改组件胡样式隔离选项小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第5张图片

 stypelsolation的可选值小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第6张图片

 二、自定义组件数据、方法、属性和数据监听

1.data数据小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第7张图片

 2.methods方法

事件处理函数、自定义方法_小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第8张图片

 3.properties属性

页面中调用this.properties.max

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第9张图片

 4.data和properties的区别

vue中properties只是可读的,小程序中可读可写小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第10张图片

 5.使用setData修改properties的值小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第11张图片

6.组件中数据监听器 小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第12张图片

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第13张图片

 7.监听对象变化小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第14张图片

 三、自定义组件数据监听案例小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第15张图片

结构 

 小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第16张图片

 定义button的事件处理函数小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第17张图片

 监听对象中指定属性的变化小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第18张图片

 监听对象中所有属性的变化小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第19张图片

 四、自定义组件--纯数据字段

1.定义小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第20张图片

 2.使用规则小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第21张图片

 小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第22张图片

 五、组件的生命周期和插槽

1.组件全部的生命周期函数

created组件实例刚刚被创建,还没放入页面节点树中

sttached:组件被放入页面节点树,还没被渲染

ready:组件被渲染完成小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第23张图片

 2.组件主要的生命周期函数小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第24张图片

 3.lifetimes节点小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第25张图片

 4.组件所在页面的生命周期小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第26张图片

 5.pageLifetimes节点

6.例子:页面切换生成随机rgb

在模板的methods中定义事件

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第27张图片

 在页面生命周期中调用小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第28张图片

 六、自定义组件--插槽

1.单个插槽

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第29张图片

 2.启用多个插槽小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第30张图片

 3.定义多个插槽小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第31张图片

 小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第32张图片

 七、父子组件通信和behaviors

1.父子组件之间的3种通信方式小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第33张图片

 2.父传子--属性绑定小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第34张图片

 小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第35张图片

 3.子传父--事件绑定

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第36张图片

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第37张图片

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第38张图片

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第39张图片

 小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第40张图片

 4.获取组件实例

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第41张图片

 5.behaviors

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第42张图片

 2.behaviors工作方式

 3.创建behaviors

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第43张图片

 4.导入并使用behavior

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第44张图片

 5.behavior中所有可用节点

小程序学习四--组件--样式、数据、方法、属性、数据监听、生命周期、插槽、behavior_第45张图片

你可能感兴趣的:(学习)