微信小程序-组件通信

一.父组件向子组件传值

以checkbox为例子，自定义一个checkbox组件，定义properties属性的checked值，当父组件checked值为true，则默认勾选。
父组件代码

<custom-checkbox  position="right" checked="true">
hello,slot
</custom-checkbox>

子组件代码：

<checkbox class="checkbox" checked="{{isCheck}}" 
bind:tap="update"></checkbox>

父组件将值传递到properties的checked属性，此时需要在JS中将checked的值赋给data中定义的isCheck才会使checkbox默认勾选

  //使用data接收properties的值observers:{checked:function(newChk){this.setData({isCheck:newChk})}}

二.子组件向父组件传值

1.子组件也就是自定义组件使用triggerEvent方法发射一个自定义事件，同时将可以将数据携带在event的detail参数里面
2.父组件可以在使用组建的过程中，使用bind绑定自定义事件进行数据的接收，bind:自定义事件

子组件发送数据：

  /*** 组件的初始数据*/data: {ojb:{name:'jerry'}},/*** 组件的方法列表*/methods: {sendData(){//发射自定义事件this.triggerEvent('myEvent',this.data.ojb)}}

父组件接收数据：
首先进行事件绑定

<view>{{obj.name}}</view>
<custom05 bind:myEvent="getData"/>

在getData方法里面接收event事件参数，属性detail里面有子组件传递值

//获取子组件getData(event){console.log(event)this.setData({obj:event.detail})}

三.父组件通过selectComponent方法获取子组件对现象

在调用子组件的时候添加ID或者CLASS选择器comp

<custom-checkbox  position="right" checked="true" bind:myEvent="getData"
class="comp" id="comp">

使用selectComponent方法获取子组件对象，数据放在对象的data属性里
需要注意的是class使用.class， id使用#id进行传值

 getComponet(){//获取组件对象 .class + #idconst res = this.selectComponent('.comp')console.log(res.data.isCheck)}