小程序系列--11.小程序自定义组件

一、组件的创建与引用

1. 创建组件

小程序系列--11.小程序自定义组件_第1张图片

2. 引用组件 

小程序系列--11.小程序自定义组件_第2张图片 3. 局部引用组件

小程序系列--11.小程序自定义组件_第3张图片

4. 全局引用组件 

小程序系列--11.小程序自定义组件_第4张图片

5. 全局引用 VS 局部引用 

小程序系列--11.小程序自定义组件_第5张图片6. 组件和页面的区别 

小程序系列--11.小程序自定义组件_第6张图片 二、样式

1. 组件样式隔离 

小程序系列--11.小程序自定义组件_第7张图片 2. 组件样式隔离的注意点

小程序系列--11.小程序自定义组件_第8张图片3. 修改组件的样式隔离选项 

小程序系列--11.小程序自定义组件_第9张图片 4. styleIsolation 的可选值

小程序系列--11.小程序自定义组件_第10张图片

三、数据、方法和属性 

 1. data 数据

小程序系列--11.小程序自定义组件_第11张图片 2. methods 方法

小程序系列--11.小程序自定义组件_第12张图片 3. properties 属性

小程序系列--11.小程序自定义组件_第13张图片 4. data 和 properties 的区别

小程序系列--11.小程序自定义组件_第14张图片 5. 使用 setData 修改 properties 的值

小程序系列--11.小程序自定义组件_第15张图片 四、数据监听器

1. 什么是数据监听器 

小程序系列--11.小程序自定义组件_第16张图片 2. 数据监听器的基本用法

小程序系列--11.小程序自定义组件_第17张图片 小程序系列--11.小程序自定义组件_第18张图片

3. 监听对象属性的变化 

 小程序系列--11.小程序自定义组件_第19张图片

数据监听器 - 案例 

小程序系列--11.小程序自定义组件_第20张图片 小程序系列--11.小程序自定义组件_第21张图片

小程序系列--11.小程序自定义组件_第22张图片 小程序系列--11.小程序自定义组件_第23张图片小程序系列--11.小程序自定义组件_第24张图片

五、纯数据字段 

1. 什么是纯数据字段 

小程序系列--11.小程序自定义组件_第25张图片 2. 使用规则

小程序系列--11.小程序自定义组件_第26张图片 3. 使用纯数据字段改造数据监听器案例

小程序系列--11.小程序自定义组件_第27张图片

六、组件的生命周期 

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

小程序系列--11.小程序自定义组件_第28张图片 2. 组件主要的生命周期函数

小程序系列--11.小程序自定义组件_第29张图片 3. lifetimes 节点

小程序系列--11.小程序自定义组件_第30张图片

七、组件所在页面的生命周期

 1. 什么是组件所在页面的生命周期

小程序系列--11.小程序自定义组件_第31张图片 2. pageLifetimes 节点

 小程序系列--11.小程序自定义组件_第32张图片

3. 生成随机的 RGB 颜色值 

 小程序系列--11.小程序自定义组件_第33张图片小程序系列--11.小程序自定义组件_第34张图片

八、插槽 

1. 什么是插槽 

小程序系列--11.小程序自定义组件_第35张图片 2. 单个插槽

小程序系列--11.小程序自定义组件_第36张图片 3. 启用多个插槽

小程序系列--11.小程序自定义组件_第37张图片 4. 定义多个插槽

小程序系列--11.小程序自定义组件_第38张图片 小程序系列--11.小程序自定义组件_第39张图片

九 、父子组件之间的通信 

1. 父子组件之间通信的 3 种方式 

小程序系列--11.小程序自定义组件_第40张图片 2. 属性绑定

小程序系列--11.小程序自定义组件_第41张图片 小程序系列--11.小程序自定义组件_第42张图片3. 事件绑定

小程序系列--11.小程序自定义组件_第43张图片 小程序系列--11.小程序自定义组件_第44张图片小程序系列--11.小程序自定义组件_第45张图片

小程序系列--11.小程序自定义组件_第46张图片 小程序系列--11.小程序自定义组件_第47张图片4. 获取组件实例

小程序系列--11.小程序自定义组件_第48张图片 十、behaviors

1. 什么是 behaviors 

小程序系列--11.小程序自定义组件_第49张图片

2. behaviors 的工作方式 

 小程序系列--11.小程序自定义组件_第50张图片

3. 创建 behavior 

小程序系列--11.小程序自定义组件_第51张图片 4. 导入并使用 behavior

小程序系列--11.小程序自定义组件_第52张图片 5. behavior 中所有可用的节点

小程序系列--11.小程序自定义组件_第53张图片6. 同名字段的覆盖和组合规则* 

小程序系列--11.小程序自定义组件_第54张图片

关于详细的覆盖和组合规则,大家可以参考微信小程序官方文档给出的说明: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html 

你可能感兴趣的:(小程序,小程序)