文章目录
微信小程序开发 - 自定义组件
一、创建自定义组件
二、局部引用组件
三、 全局引用组件
四、全局引用和局部引用的应用场景
- 单个页面使用局部引用,多个页面使用全局引用。
五、组件和页面的区别
六、 组件样式的隔离
样式隔离注意点
- 只有 class 选择器才有样式隔离
七、修改组件样式隔离选项
- 参数如下:
八、自定义组件 - 数据、方法、属性
8.1 data - 数据
8.2 methods - 方法
8.3 properties - 属性
九、data 和 properties 的区别
十、setData修改 properties的数据
十一、 数据监听器
1. 什么是数据监听器
2. 数据监听器的基本使用
3. 监听对象属性的变化
十二 监听器案例
1. 案例效果
2. 渲染组件UI 结构
3. 按钮的事件处理函数
4. 监听对象属性值的变化
- 这样就能实现值改变,视图发生变化
5. 监听对象属性中所有属性值的变化(代码优化)
十三、纯数据字段
1. 什么是从数纯数据字段![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/90126c15eb5e784181b480faa0a3a6e6.png)
2. 使用规则
3. 纯数据字段的使用及代码改造
- 这样 rgb就是纯数据字段,不会被页面渲染和逻辑处理,提高页面渲染的性能。
十四、组件的生命周期函数
1. 生命周期函数
2. 主要的生命周期函数
3. ilfetimes 节点
- 采用新的方式进行定义生命周期函数
十五、组件所在页面的生命周期函数
1. 什么是组件所在页面的生命周期函数
2. pageLifetimes 节点
3. 生成随机色
- 方法调用
十六、 自定义组件 - 插槽
1. 什么是 插槽
单插槽的使用
3. 启用多个插槽
4. 使用多个插槽
十七、组件通信
1. 组件通信的三种方式
2. 属性绑定
- 子组件进行使用
3. 事件绑定 通信
步骤一:
步骤二:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca8d5a13a5a6ef5f4c221808ad04db09.png)
步骤三:
步骤四:
4. 组件实例通信
十八、behaviors
1. 什么是 behaviors
2. behaviors 工作方式
3. 创建 behaviors 共享
4. 导入 behaviors 并使用
- 可用节点如下: