微信小程序自定义组件 - 父子组件之间的通信

1. 父子组件之间通信的 3 种方式

① 属性绑定

用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

② 事件绑定

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

③ 获取组件实例

父组件还可以通过 this.selectComponent() 获取子组件实例对象

这样就可以直接访问子组件的任意数据和方法

 2. 属性绑定

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下：

//父组件中定义
data:{
    count:0
}

<my-test5 count="{{count}}">
</my-test5>
<view>~~~~~</view>
<view>父组件中，count的值为{{count}}</view>

子组件在 properties 节点中声明对应的属性并使用。示例代码如下：

    properties: {
        count:Number
    },

<text>子组件中的值为：{{count}}</text>

3. 事件绑定

事件绑定用于实现子向父传值，可以传递任何类型的数据。使用步骤如下：

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

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

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

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

步骤1：在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件。

 //在父组件中定义方法
//将来，这个方法会被传递到子组件中

SycnCount(e){
        console.log("SycnCount")
    },

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

<my-test3 count="{{count}}" bind:sycn="SycnCount">

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

//子组件中

<view>子组件中，count的值是：{{count}}</view>

<button bindtap="addCount">+1</button>



//子组件方法
 methods: {
        addCount(){
            this.setData({
                count:this.properties.count + 1
            })
            this.triggerEvent('sycn',{value:this.properties.count})
        }
    }

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

 SycnCount(e){
        this.setData({
            count: e.detail.value
        })
    },

这样就成功的通过事件绑定实现父子组件之间传值

4. 获取组件实例

//在父组件中.wxml代码结构如下：
<my-test3 count="{{count}}" bind:sycn="SycnCount" class="customA">
   <view>~~~~~~</view>
</my-test3>
<button bindtap="getchild">获取子组件实例</button>


//在.js 文件中

    getchild(){
       const child = this.selectComponent('.customA')

        child.setData({
            count: child.properties.count +1     //调用子组件的setdata方法
        }),
        child.addCount()    //调用子组件的addCount方法
    },