微信小程序自定义组件和通信的方法

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

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

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

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

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

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

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

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

// 在父页面（组件）中
Page({
  data: {
    num: ''
  },
  getData (event) {
    // 可以通过事件对象.detail 获取子组件传递给父组件的数据
    // console.log(event)
    this.setData({
      num: event.detail
    })
  }
})