微信小程序组件详解

一、组件的创建

image.png
image.png

二、组件的引入

image.png

2.1. 局部引入

image.png

2.2. 全局引用组件

image.png

2.3. 全局引用VS局部引用

image.png

三、组件和页面的区别

image.png

四、组件样式隔离

image.png

image.png

4.1. 组件样式隔离的注意点

image.png

4.2. 修改组件的样式隔离选项

image.png

image.png

4.2.1. stylelsolation 的可选值

image.png

五、组件的数据方法和属性

5.1. data 数据

image.png

5.2. methods 方法

image.png

5.3. properties 属性

image.png

5.4. data和 properties 的区别

image.png

5.5. 使用 setData 修改 properties 的值

image.png

image.png

六、组件的数据监听器

6.1. 什么是数据监听器

image.png

image.png

6.2. 数据监听器的基本用法

image.png

image.png

6.3. 监听对象属性的变化

image.png

七、组件的纯数据字段

7.1. 什么是纯数据字段

image.png

7.2. 使用规则

image.png

image.png

八、组件的生命周期

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

image.png

8.2. 组件主要的生命周期函数

image.png

8.3. lifetimes 节点声明生命周期函数

image.png

image.png

8.4. 组件中使用所在页面的生命周期

image.png

8.4.1. pageLifetimes 节点

组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中,示例代码如下:

image.png

九、组件的插槽

image.png

9.1. 单个插槽

在小程序中,默认每个自定义组件中只允许使用一个 <slot> 进行占位,这种个数上的限制叫做单个插槽。
image.png

9.2. 启用多个插槽

在小程序的自定义组件中,需要使用多 <slot> 插槽时,可以在组件的js文件中,通过如下方式进行启用。
image.png

9.3. 定义多个插槽

可以在组件的.wxml中使用多个 <slot> 标签,以不同的 name 来区分不同的插槽。示例代码如下:

image.png

9.4. 使用多个插槽

image.png

十、父子组件之间的通信的三种方式

image.png

10.1. 属性绑定 (父传子)

image.png

10.2. 事件绑定 (子传父)

image.png

image.png

image.png

image.png
image.png

image.png

10.3. 获取组件实例

image.png

image.png

十一、自定义组件 - behaviors

11.1. 什么是behaviors

image.png

11.2. behaviors的工作方式

image.png

11.3. 创建 behavior

image.png

image.png

11.4. 导入并使用 behavior

image.png

image.png

11.5. behavior中所有可用的节点

image.png

11.6. 同名字段的覆盖和组合规则

image.png

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值