20220116

自定义组件

1.组件的创建与引用

组件的创建

引用组件

组件的引用方式分为“局部引用”和“全局引用”，顾名思义：

• 局部引用：组件只能在当前被引用的页面内使用
• 全局引用：组件可以在每个小程序页面中使用

局部引用

在页面的 .json 配置文件中引用组件,然后在页面的wxml文件中使用组件

全局引用

在 app.json 全局配置文件中引用组件，然后各个页面的wxml中就都可以使用该组件

2. 样式

1. 组件样式隔离
   默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI 结构

• 组件 A 的样式不会影响组件 C 的样式
• 组件 A 的样式不会影响小程序页面的样式
• 小程序页面的样式不会影响组件 A 和 C 的样式
  

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

• app.wxss 中的全局样式对组件无效
• 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响
  建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器

如果希望在外界也能使用组件内部的样式，可以通过styleIsolation修改组件的样式隔离选项

styleIsolation 的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件

3.数据、方法和属性

// componets/test/test.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {

    },

    /**
     * 组件的方法列表
     */
    methods: {

    }
})

• 在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中
• 在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中（自定义方法建议以_开头）
• 在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据

    properties: {
        max:{         //完整定义属性的方式
            type:Number,//属性值的数据类型
            value:10//属性的默认值
        },
        max:Number//简化定义属性的方式【当不需要指定属性默认值时，可以用此方式】
    },

data 和 properties 的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

• data 更倾向于存储组件的私有数据
• properties 更倾向于存储外界传递到组件中的数据
  

使用 setData 修改 properties 的值

4. 数据监听器

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

ex：

<view>{{n1}}+{{n2}}={{sum}}</view>

<button bindtap="addN1">n1+1</button>
<button bindtap="addN2">n2+1</button>

// componets/test/test.js
Component({
    /**
     * 组件的初始数据
     */
    data: {
        n1: 0,
        n2: 0,
        sum: 0
    },
    /**
     * 组件的方法列表
     */
    methods: {
        addN1() {
            this.setData({
                n1: this.data.n1 + 1
            })
        },
        addN2() {
            this.setData({
                n2: this.data.n2 + 1
            })
        }
    },
    observers: {
        'n1,n2': function (newN1, newN2) {
            this.setData({
                sum: newN1 + newN2
            })
        }
    }
})

案例注意的点：
为data中的fullcolor重新赋值时，

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

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，示例
代码如下：

5. 纯数据字段

纯数据字段指的是那些不用于界面渲染的 data 字段
应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
好处：纯数据字段有助于提升页面更新的性能。
使用规则
在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则
表达式的字段将成为纯数据字段

6. 组件的生命周期

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

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

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

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

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

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

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

• 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
• 此时适合做一些清理性质的工作

lifetimes 节点

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

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

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

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

pageLifetimes 节点

8.插槽

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

单个插槽

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

启用多个插槽

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

定义多个插槽

可以在组件的 .wxml 中使用多个 标签，以不同的 name 来区分不同的插槽。

使用多个插槽

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

9.父子组件之间的通信

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

1. 属性绑定
   用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
2. 事件绑定
   用于子组件向父组件传递数据，可以传递任意数据
3. 获取组件实例

• 父组件还可以通过 this.selectComponent() 获取子组件实例对象
• 这样就可以直接访问子组件的任意数据和方法

事件绑定

步骤1：在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

步骤2：在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件

步骤3：在子组件的 js 中，通过调用 this.triggerEvent(‘自定义事件名称’, { /* 参数对象 */ }) ，将数据发送到父组件。

步骤4：在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

10.behaviors

behaviors 是小程序中，用于实现组件间代码共享的特性
调用 Behavior(Object object) 方法即可创建一个共享的 behavior 实例对象，供所有的组件使用

在组件中，使用 require() 方法导入需要的 behavior，挂载后即可访问 behavior 中的数据或方法，示例代码如下：

behavior 中所有可用的节点

可用的节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其它的 behavior
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数