小程序采坑记（九） 组件通信

通常我们写小程序页面的js文件时，里面是小程序的生命周期函数和data

但是在组件的js文件里面是Component（{}）

通信方式一：properties，其实和vue的props一样。

properties主要就是用于组件和页面，或者组件和组件的通信，你可以设置属性的类型和默认值。

<video-tencent  url='{{item.videoUrl}}'  coverUrl='{{item.activityCover}}'></video-tencent>

在使用组件的时候，属性对应，就可以把数据从页面传到组件。

通信方式二：

事件通信，组件一般只派发事件，传递数据，业务逻辑通常写在使用组件的页面里面

如：
组件里面的其中一个元素的点击事件

<view >
  <text bindtap='myevent'>测试</text>
</view>

Component({
data:{

},
methods:{
  myevent(e){
    var d = 'sss'
    var eventDetail = {
      e:e,
      d:'bbb'
    }
    this.triggerEvent("myevent", eventDetail)
  }
}
})

注意事件派发用this.triggerEvent()，第一个参数为派发事件的 名称，第二个为派发的参数，是一个object

使用组件的页面

<view class="container">

  <detail bind:myevent='showDetailInfo'></detail>
</view>

使用组件页面的bind：后面这个为组件派发事件的名称，等号后面是我们的事件处理逻辑。

  showDetailInfo(e){
    console.log(e)
  },

这个事件处理逻辑的参数就包含了从组件传过来的参数，在e.detail里面。

其实这两个通信的方法跟vue的都基本上一样的。