微信小程序组件传参和交互

1. 自定义组件 与 父组件相互传参

parent.wxml

<view class="echaerBox">
  <pie class="pieEchart" style="height: 200px;" echartData="{{echartData}}" bind:parentEvent='onParentEvent'></pie>
</view>

parent.wxs

onParentEvent: function (event) {
    // 自定义组件触发事件时提供的detail对象，用来获取子组件传递来的数据
    console.log('子组件传递来的数据 id:', event);
  },

child.wxml

onTapChild: function(event){
      // detail对象，提供给事件监听函数
      var myEventDetail = {
        id: 11111111111
      } 
      // 触发事件的选项
      var myEventOption = {}     
      // 使用 triggerEvent 方法触发自定义组件事件，指定事件名、detail对象和事件选项   bubbles:是否冒泡，composed:是否可以穿越组件边界，capturePhase: 是否拥有捕获阶段
      this.triggerEvent('parentEvent', myEventDetail, myEventOption)

    }

2. 父组件调用自定义组件的事件

parent.wxml

<view class="echaerBox">
  <pie class="pieEchart" style="height: 200px;" echartData="{{echartData}}" 
  id="pieCom" 
  bind:parentEvent='onParentEvent'></pie>

    <button bindtap="bindbtn">params</button>

</view>

parent.js

data: {
    pieCom: null,
}

onReady: function () {
    this.pieCom = this.selectComponent('#pieCom')
},

bindbtn(e){
    let pieCom = this.pieCom
    pieCom.outStr()  // 调用自定义组件中的方法
},

child.wxs

outStr(){
      console.log('子组件输出')
}