小程序自定义组件通信

小程序自定义组件

小程序的自定义组件和页面一样由 json wxml wxss js 4个文件组成。首先要在组件的json文件里面加入"component": true，表示将这个文件设置为自定义组件。然后在全局app.json里面加入

 "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }

这样就完成了组件的注册，我们在所有页面都可以调用这个组件了。（component-tag-name表示组件名，path/to/the/custom/component表示组件的相对路径）。下面我们就讲讲组件与页面之间的通信：

一.页面向组件传值：

1. 页面传值
   在页面.wxml里面加入组件如：.。其中reason和advice是我们想传给组件的值，bindmyevent这个事件我们下面会讲到。
2. 组件接收值
   小程序提供了组件的属性列表properties，里面存放从页面传过来的参数

  properties: {
    reason: {
      type: String,
      value: 'default value',
    },
    advice: {
      type: String,
      value: 'default value',
    }
  },

type表示传过来值的类型，value可以设置默认值。这样就可以在组件里面绑定传过来的值了。如：

 <view class="word_des" bindtap="event">
   <!-- 产生的原因 -->
     <block>
       <view class='healthy-title title-reason'>原因</view>
     </block>
     <view class="reason_content">{{ reason }}</view>
   </view>
   <!-- 改善建议 -->
     <block>
       <view class='healthy-title advice'>建议</view>
     </block>
     <view class='healthy-article'>
       <view class="advice_content">{{ advice }}</view>
     </view>
  </view> 

二.组件向页面传值

1. 给组件绑定一个事件，如bindtap=“event”，然后在js文件里面的methods里面写入方法：

    event:function(){
      this.triggerEvent('myevent', {id:1}, { bubbles: true, composed: true })
    }

triggerEvent是一个自定义事件，类似于vue中的$emit和angular中的emit。myevent为我们自定义事件的名称，id为传给页面的值。

2.页面接受组件传值

页面引入的组件里面加入接受这个自定义事件bindmyevent=“getEvent”，bindmyevent为bind+自定义的方法名。这样就可以在js里面调用getEvent拿到值了。

  getEvent: function (e) {
    console.log(e)
  },

自己也可以参考官网说明：官网地址