【微信小程序】父子组件之间的通信

父子组件之间的3种通信

① 属性绑定

● 用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。

② 事件绑定

● 用于子组件向父组件传递数据，可以传递任意数据。

③ 获取组件实例

● 父组件可以通过this.selectComponent()获取子组件实例对象， 这样就可以直接访问子组件的任意数据和方法。

属性绑定

父组件给子组件传值：

//父组件的data节点
data:{
    count:0
}
//父组件的wxml结构 test是子组件
<test count="{{count}}"></test> //把值传给子组件

子组件在properties节点中声明对应的属性并使用:

//子组件的properties节点
properties:{
    count:Number
}
//子组件的wxml结构
<text>子组件中:count值为:{{count}}</text>

事件绑定

① 在父组件的js中，定义一个函数，这个函数通过自定义事件的形式传递给子组件。

syncCount(){
    console.log('syncCount')
}

② 在父组件的xml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件。

<test bind:sync="syncCount"></test>

③ 在子组件的js中，通过调用this.triggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件。

//子组件的方法
 addCount(){
    this.triggerEvent('sync',{value:this.properties.count})
}

④ 在父组件的js中，通过e.detail获取到子组件传递过来的数据。

syncCount(e){
    //console.log('syncCount')
    this.setData({
        count:e.detail.value
    })
}

获取组件实例

可在父组件里调用this.selectComponent("id或class选择器"),获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如this.selectComponent(".my-component")。

//父组件的wxml
<test count="{{count}}" class="customer"></test>

//父组件的方法
getChild(){
    const child = this.selectComponent('.customer')
    console.log(child)
    //使用获取到的子组件实例 操作子组件的数据
    child.setData({
        count:child.properties.count + 1
    })
}