微信小程序中自定义组件间通信传值

微信小程序的自定义组件用多了就会上瘾，恨不得把页面都写成组件，但是这样就会设计很多组件间的通信问题，那就总结一下，在微信小程序里，组件间是如何通信传值的。

父组件给子组件传值

子组件需要接收父组件传过来的值，在properties里定义：

 /**
   * 组件的属性列表
   */
  properties: {
    //图片地址
    img_src: {
      type: String
    },
    //可视区域的大小
    view_width: {
      type: String
    },
    view_height: {
      type: String
    },
    setX: {
      type: String
    },
    setY: {
      type: String
    },
    setScale: {
      type: String
    }
  },

父组件需要传值给子组件，直接写在子组件的内容里就行：

<zoomImgByView 
          id='mapLayout'
          img_src="{{img_list[index].image_url}}"
          view_width="{{img_list[index].width}}"
          view_height="{{img_list[index].height}}" />

这样，就可以把父组件的信息传给子组件了。

子组件给父组件传值，会麻烦一点。

子组件通过事件传值，绑定一个事件 close：

<view class='iosTip-close' bindtap='close'></view>

事件close需要写上triggerEvent：

close: function() {
      var myShow = {
        myShow: false
      }
      this.triggerEvent('myevent', myShow) //myevent自定义名称事件，父组件中使用
    }

父组件中引入子组件，并在子组件中写上 bind:myevent：

<iosTip bind:myevent="onGetShow" wx:if="{{IsIosShow}}" />

父组件的即可通过onGetShow拿到子组件传过来的值：

onGetShow: function (e) {
    console.log(e.detail.myShow)
    this.setData({
      IsIosShow: e.detail.myShow
    })
  },