微信小程序学习（七）：自定义组件和通信_微信小程序 usingcomponents

1、基本知识

开发中常见的组件主要分为 公共组件 和 页面组件 两种，因此注册组件的方式也分为两种：

• 全局注册：在 app.json 文件中配置 usingComponents 节点进行引用声明，注册后可在任意组件使用
• 局部注册：在页面.json 文件中配置 usingComponents 节点进行引用声明，只可在当前页面使用

在组件的 .js 中，需要调用 Component 方法创建自定义组件，Component 中有以下两个属性：

• data 数据：组件的内部数据
• methods 方法：在组件中事件处理程序需要写到 methods 中才可以
• 其他……

2、Properties属性

属性 Properties 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染

Component({
   properties: {
     // 如果需要接收传递的属性，有两种方式：全写、简写
     label: String // 简写
 
     label: {
       // type 组件使用者传递的数据类型
       // 数据类型：String、Number、Boolean、Object、Array
       // 也可以设置为 null，表示不限制类型
       type: String,
       value: ''
     },
 
     // 文字显示位置
     position: {
       type: String,
       value: 'right'
     }
   }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3、slot插槽

在使用基础组件时，可以给组件传递子节点传递内容，从而将内容展示到页面中，自定义组件也可以接收子节点内容

只不过在组件模板中需要定义 <slot /> 节点，用于承载组件引用时提供的子节点

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

同时需要给 slot 添加 name 来区分不同的 slot，给子节点内容添加 slot 属性来将节点插入到 对应的 slot 中

Component({

  options: {
    // 启用多 slot 支持
    multipleSlots: true
  }

})
1
2
3
4
5
6
7
8

<!-- 子组件 -->
<view>
  <slot name="slot-top" />
  <!-- slot 就是用来接收、承载子节点内容 -->
  <!-- slot 只是一个占位符，子节点内容会将 slot 进行替换 -->
  
  <!-- 默认插槽 -->
  <view><slot /></view>

  <slot name="slot-bottom" />
</view>
1
2
3
4
5
6
7
8
9
10
11

<custom01>
  <text slot="slot-top">我需要显示到顶部</text>
    
  <!-- 默认情况下，自定义组件的子节点内容不会进行展示 -->
  <!-- 如果想内容进行展示，需要再组件模板中定义 slot 节点 -->
  我是子节点内容
    
  <text slot="slot-bottom">我需要显示到低部</text>
</custom01>
1
2
3
4
5
6
7
8
9

4、组件样式隔离

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：

• app.wxss 或页面. wxss 中使用了标签名（view）选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。
• 指定特殊的样式隔离选项 styleIsolation，支持以下取值：
• isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
• apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
• shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。

Component({
  options: {
    styleIsolation: 'isolated'
  }
})
1
2
3
4
5

5、组件间通信

• 父往子传值：Properties
• 子往父传值：自定义事件、获取组件实例

5.1 自定义事件

• 自定义组件触发事件时，需要使用 triggerEvent 方法发射一个自定义的事件
• 自定义组件标签上通过 bind 方法监听发射的事件

子组件触发事件：

<!-- 在子组件中 -->
<button type="primary" plain bindtap="sendData">传递数据</button>
1
2

// 在子组件中
Component({
  // 组件的初始数据
  data: {
    num: 666
  },
  // 组件的方法列表
  methods: {
    // 将数据传递给父组件
    sendData () {
      // 如果需要将数据传递给父组件
      // 需要使用 triggerEvent 发射自定义事件
      // 第二个参数，是携带的参数
      this.triggerEvent('myevent', this.data.num)
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

父页面（组件）监听事件：

<!-- 在父页面（组件）中 -->
<view>{{ num }}</view>
<!-- 需要在自定义组件标签上通过 bind 方法绑定自定义事件，同时绑定事件处理函数 -->
<custom05 bind:myevent="getData" />
1
2
3
4

// 在父页面（组件）中
Page({

  data: {
    num: ''
  },

  getData (event) {
    // 可以通过事件对象.detail 获取子组件传递给父组件的数据
    // console.log(event)
    this.setData({
      num: event.detail
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

5.2 获取组件实例

可在父组件里调用 this.selectComponent() ，获取子组件的实例对象，就可以直接拿到子组件的任意数据和方法。

调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。