微信小程序——自定义组件（纯数据字段），组件的生命周期，组件所在页面的生命周期，插槽，父子组件之间的通信，事件绑定，属性绑定，behavior_自定义组件的特点有哪些

作者：Cpp五条 | 2024-02-15 23:27:57

踩

自定义组件的特点有哪些

一.纯数据字段

1.什么是纯数据字段

概念：纯数据字段指的是那些不用于界面渲染的data字段。

应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能。


<view style="background-color: rgb({{fullColor}});" class="colorBox">颜色值：{{fullColor}}</view>
<button  type="default" bindtap="changeR">R</button>
<button  type="primary" bindtap="changeG">G</button>
<button  type="warn" bindtap="changeB">B</button>
<!-- <view>{{rgb.r}} , {{rgb.g}} {{rgb.b}}</view> -->

此处的rgb在页面中就是纯数据字段

2.使用规则

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下：

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

当面对多个rgb需要改写，通过选中rgb.按住CTRL+d即可快速选中，再按左键将光标移动到字母r前即可完成全部改造。

二.组件的生命周期

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

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

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

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

①组件实例刚被创建好的时候， created 生命周期函数会被触发

.此时还不能调用 setData

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

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

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

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

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

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

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

3.lifetimes节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。示例代码如下：

新版书写方法：

当旧版新版同时出现的时候，只会展示新版的结果。

三.组件所在页面的生命周期

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

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

例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。在自定义组件中，组件所在页面的生命周期函数有如下3个，分别是：

2. pageLifetimes 节点

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

在组件.js文件中：

3.生成随机的RGB颜色值

在test.js的method方法中随机生成一个颜色值


_randomColor(){
      this.setData({
        _rgb: {
          r:Math.floor(Math.random() *256),
          g:Math.floor(Math.random() *256),
          b:Math.floor(Math.random() *256)
        }
      })
    }