小程序组件间的通信

文档：组件间通信与事件

什么是组件？

• 可重复利用的标签，比如：<dialog></dialog>

什么是通信？

• 传递数据。

什么是事件？

• 是视图层到逻辑层的通讯方式，当触发事件时，执行逻辑层中对应的函数，用于子组件向父组件传递数据。

组件间的基本通信方式

1. 父组件向子组件传递数据

• 数据绑定

  // index.wxml
  <dialog title="{{title}}"></dialog>
  

• this.selectComponent()获取组件实例，直接修改子组件的方法、属性

  // index.wxml
  <dialog id="dialog" title="{{title}}"></dialog>
  <button bindtap="getSubComponentFun">调用子组件的方法</button>
  

  // index.js
  data:{},
  onReady(){
      this.childComponet = this.selectComponent('#dialog')
  },
  getSubComponentFun(){
      this.childComponet.innerFun(); // 调用子组件里的方法
  }
  

  // 自定义component组件（子组件）
  Component({
     properties:{},
     methods:{
         innerFun:function(){
             console.log('调用子组件的方法')
         }
     }
  })
  

2. 子组件向父组件传递数据（需要事件的触发）

• 事件，涉及事件监听和事件注册

  <!--自定义component组件（子组件）-->
  <button bindtap="sendData"></button>
  

  // 自定义component组件（子组件）
  Component({
      properties:{},
      methods:{
          sendData:function(){
              // 子组件传递给父组件的参数
              var myEventDetail = {
                  name:'小明'
              }
              
              // 如果子组件套子组件，触发事件需要有冒泡的处理方式
              var myEventOption = {
                  bubbles: true, 
                  composed: true
              }
              
              // triggerEvent的参数：事件名、要传递的数据、触发事件的选项
              this.triggerEvent('myEvent',myEventDetail,myEventOption)
          }
      }
  })
  

  // index.wxml,调用子组件的页面
  <dialog id="dialog" title="{{title}}" bind:myEvent='onMyEvent'></dialog>
  

  // index.js
  Page({
      data(){},
           (e){
          console.log(e)
          console.log(e.detail.name) // '小明'
      }
  })
  

如果组件嵌套，triggerEvent如何使用myEventOption

<!-- 子组件1 compParent -->
<view bind:customevent="compParent">
    <slot/>
</view>

<!-- 子组件2 compChild -->
<view bind:customevent="compChild">
    <slot/>
</view>

<!-- index.wxml -->
<compParent bind:customevent="pageListenParent">
    <compChild bind:customevent="pageListenChild"></compChild>
</compParent>

// 组件 compChild.js
Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2
      this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageListenChild 、 pageListenParent
      this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageListenChild 、 compChild 、 pageListenParent
      
      /*最后一种wxml结构相当于：
      <compParent bind:customevent="pageListenParent">
          <view bind:customevent="compChild">
              <compChild bind:customevent="pageListenChild"></compChild>
          </view>
      </compParent>
      */
    }
  }
})