【小程序】自定义组件 - 监听器、生命周期、插槽

矫情吗；* 2024-03-30 12:08 49阅读 0赞

**目录**

自定义组件 - 数据监听器

1. 什么是数据监听器

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

3. 监听对象属性的变化

编辑 自定义组件 - 数据监听器 - 案例

1. 案例效果

编辑 2. 渲染 UI 结构

3. 定义 button 的事件处理函数

4. 监听对象中指定属性的变化

5. 监听对象中所有属性的变化

自定义组件 - 纯数据字段

1. 什么是纯数据字段

2. 使用规则

3. 使用纯数据字段改造数据监听器案例

编辑 自定义组件 - 组件的生命周期

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

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

3. lifetimes 节点

自定义组件 - 组件所在页面的生命周期

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

2. pageLifetimes 节点

3. 生成随机的 RGB 颜色值

自定义组件 - 插槽

1. 什么是插槽

2. 单个插槽

3. 启用多个插槽

4. 定义多个插槽

4. 使用多个插槽

## 自定义组件 - 数据监听器 ##

### 1. 什么是数据监听器 ###

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于

vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：![8c09c59d3214410c8dd2b15f53b6c809.png][]

### 2. 数据监听器的基本用法 ###

组件的 UI 结构如下：

![f319d1e862704b16a6f7dd2191d5cee3.png][]

组件的 .js 文件代码如下：

![2037f70e7a2b4b4cbb698036676fc926.png][]

### 3. 监听对象属性的变化 ###

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

## ![7601ee502fb746f4866df396bbc19e13.png][] 自定义组件 - 数据监听器 - 案例 ##

### 1. 案例效果 ###

![0b7434411e994a24a8d6e5c81bd67fd2.png][]

### ![7b3543d9c4044edba347a610ec287d7e.png][] 2. 渲染 UI 结构 ###

![b871dbf3076f4f649d50e284b640ab14.png][]

### 3. 定义 button 的事件处理函数 ###

![cd8a462468884b5287fbf99b5f2e8fe1.png][]

### 4. 监听对象中指定属性的变化 ###

![fdeddeebfbbb48098699b6ca2a9cba21.png][]

### 5. 监听对象中所有属性的变化 ###

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 \*\* 来监听对象中所有属性的

变化，示例代码如下：

![8d26c456a1944998b967f07fdaeabc20.png][]

## 自定义组件 - 纯数据字段 ##

### 1. 什么是纯数据字段 ###

概念：纯数据字段指的是那些不用于界面渲染的 data 字段。 应用场景：例如有些情况下，某些

data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这

种特性的 data 字段适合被设置为纯数据字段。 好处：纯数据字段有助于提升页面更新的性能。

### 2. 使用规则 ###

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合

这个正则表达式的字段将成为纯数据字段，示例代码如下：

![93b1149366a84c319cec456d52ba294c.png][]

### 3. 使用纯数据字段改造数据监听器案例 ###

## ![cb482fc1790441c893ea2aac6b6f4d2f.png][] 自定义组件 - 组件的生命周期 ##

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

小程序组件可用的全部生命周期如下表所示：

![68d58bd2dada4c1588a1133469e473e7.png][]

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

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各

自的特点如下： 组件实例刚被创建好的时候，created 生命周期函数会被触发

此时还不能调用 setData  
通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发

此时， this.data 已被初始化完毕

这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

在组件离开页面节点树后， detached 生命周期函数会被触发

退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数

此时适合做一些清理性质的工作

### 3. lifetimes 节点 ###

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在

lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：![5e04ad3d932b456d884b6571317f1f1b.png][]

## 自定义组件 - 组件所在页面的生命周期 ##

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

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期。 例

如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色

值。 在自定义组件中，组件所在页面的生命周期函数有如下 3 个，分别是： ![179485fdbf6b42b29b4600d42d5d6501.png][]

### 2. pageLifetimes 节点 ###

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

![8f2ba782248c46f880b364aa60dc7789.png][]

### 3. 生成随机的 RGB 颜色值 ###

![507b60b97f76400fac5e29404b1c25d0.png][]

![a22838fa785541d78636df379d46e13d.png][]

## 自定义组件 - 插槽 ##

### 1. 什么是插槽 ###

在自定义组件的 wxml 结构中，可以提供一个 <slot> 节点（插槽），用于承载组件使用者提供的

wxml 结构。

![774061aa2e124331b8e9f2f69cb5edbe.png][]

### 2. 单个插槽 ###

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

个插槽。

### ![e1c8e6320c5f4948805b236f8f62a115.png][] 3. 启用多个插槽 ###

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

行启用。 示例代码如下：![38df393aaf5c4c0d8779c996a567c51c.png][]

### 4. 定义多个插槽 ###

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

下：

![be1ec937e7bc4073b3fa809b17bbd868.png][]

### 4. 使用多个插槽 ###

在使用带有多个插槽的自定义组件时，需要用 slot 属性来将节点插入到不同的 <slot> 中。示例代

码如下：

![f826b7830df244d5bf8d2369ae45de5b.png][]

[8c09c59d3214410c8dd2b15f53b6c809.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b668c1895e2346408b7ff7ca10f1b157.png
[f319d1e862704b16a6f7dd2191d5cee3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/a54476272d1d46f49568d1266bc8477d.png
[2037f70e7a2b4b4cbb698036676fc926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/21c708964aa449ba9f3a0171cadb142b.png
[7601ee502fb746f4866df396bbc19e13.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5607335dd41048b588b104b982f41d5e.png
[0b7434411e994a24a8d6e5c81bd67fd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e18574f35f3f4f2c982d37a09f7db85d.png
[7b3543d9c4044edba347a610ec287d7e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f00e89b4af0f48ae993db21abe5b01e3.png
[b871dbf3076f4f649d50e284b640ab14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/901605777f58417599ccdd94def8e25b.png
[cd8a462468884b5287fbf99b5f2e8fe1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/343bbd9895cd4f47ad31fe007efde345.png
[fdeddeebfbbb48098699b6ca2a9cba21.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e5d3069c617142a2b8fe1b1d1332825b.png
[8d26c456a1944998b967f07fdaeabc20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e3c99d15d9f84cfa9d6dcdf9ee97f03d.png
[93b1149366a84c319cec456d52ba294c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f5bd982555d44d1f8f1afcab84ee4ef6.png
[cb482fc1790441c893ea2aac6b6f4d2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7b510b30031e4f938b21307287eedfdf.png
[68d58bd2dada4c1588a1133469e473e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e7a4a0f07e51414abed59ccab3af192a.png
[5e04ad3d932b456d884b6571317f1f1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1baa1e35b7fb466dac45251e1b13b385.png
[179485fdbf6b42b29b4600d42d5d6501.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0a6a31396f9b4a30a0e4d9241ec70305.png
[8f2ba782248c46f880b364aa60dc7789.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/84cde5b33f2140e79772ba16074032ef.png
[507b60b97f76400fac5e29404b1c25d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/388c2bc3805d4d3cbc880a63ce3a67ff.png
[a22838fa785541d78636df379d46e13d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/3a91cf53c55a4930abe9645f3d02ba69.png
[774061aa2e124331b8e9f2f69cb5edbe.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fd1d1d7da39e45ab964060542e823850.png
[e1c8e6320c5f4948805b236f8f62a115.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2e92afa0403940608af8466d99ffbaac.png
[38df393aaf5c4c0d8779c996a567c51c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/28c9e21e5ab04fb8a2a252784cc40d29.png
[be1ec937e7bc4073b3fa809b17bbd868.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fb72ee74eb534e7bb837ba1d4f11fa88.png
[f826b7830df244d5bf8d2369ae45de5b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/86046a13e0524d75a6fe273f7cda8b44.png