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

1、基本知识

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

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

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

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

2、Properties属性

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

javascript 复制代码

Component({
   properties: {
     // 如果需要接收传递的属性，有两种方式：全写、简写
     label: String // 简写
 
     label: {
       // type 组件使用者传递的数据类型
       // 数据类型：String、Number、Boolean、Object、Array
       // 也可以设置为 null，表示不限制类型
       type: String,
       value: ''
     },
 
     // 文字显示位置
     position: {
       type: String,
       value: 'right'
     }
   }
})

3、slot插槽

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

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

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

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

javascript 复制代码

Component({

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

})

html 复制代码

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

  <slot name="slot-bottom" />
</view>

html 复制代码

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

4、组件样式隔离

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

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

javascript 复制代码

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

5、组件间通信

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

5.1 自定义事件

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

子组件触发事件：

html 复制代码

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

javascript 复制代码

// 在子组件中
Component({
  // 组件的初始数据
  data: {
    num: 666
  },
  // 组件的方法列表
  methods: {
    // 将数据传递给父组件
    sendData () {
      // 如果需要将数据传递给父组件
      // 需要使用 triggerEvent 发射自定义事件
      // 第二个参数，是携带的参数
      this.triggerEvent('myevent', this.data.num)
    }
  }
})

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

html 复制代码

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

javascript 复制代码

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

  data: {
    num: ''
  },

  getData (event) {
    // 可以通过事件对象.detail 获取子组件传递给父组件的数据
    // console.log(event)
    this.setData({
      num: event.detail
    })
  }
})

5.2 获取组件实例

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

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