【微信小程序--父子通信3种方式】

实现组件父子通信有哪3种方式

官方文档-组件间通信与事件

示例：父组件 传递给 子组件一个数字count，子组件有个按钮，点击一次 数字count +1，

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

2、事件绑定
用于子组件向父组件传递数据，可以传递任意数据

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

/* 父组件*/
Page({
    /**
     * 页面的初始数据
     */
    data: {
        count:3     //父传子--属性绑定--父组件定义数据
    },
    faCount(e){
       //todo
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },
})

2. 在父组件的wxml中，通过自定义事件的形式 bind:自定义名称，将步骤1中定义的函数引用，传递给子组件test

<view>我是父组件--数据count:{{count}}</view>
<test count="{{count}}" bind:aaa="faCount">父传子--属性绑定--传递给子</test>  
<test count="{{count}}" bindaaa="faCount"></test>

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

<view>我是子组件---父组件传过来的数据是count:{{count}}</view>
<button bindtap="addCount">+1</button>

Component({
    options:{
        multipleSlots:true
    },
    /**
     * 组件的属性列表
     */
    properties: {
        count:Number    //父传子--属性绑定--子接收数据
    },
    /**
     * 组件的初始数据
     */
    data: { },
    /**
     * 组件的方法列表
     */
    methods: {
        addCount(){
        	//让子组件数值+1
            this.setData({
                count:this.properties.count + 1
            })
            //让父组件同步数值
            this.triggerEvent('aaa',{value:this.properties.count})
        }
    },
    pageLifetimes:{
        show(){},
        hide(){},
        
    }
})

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

  faCount(e){
  		//父组件重新赋值
        this.setData({
            count: e.detail.value
        })
    },

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

1、父组件
 // wxml 结构
<button bindtap="getChild">获取子组件实例</button>
// js文件
getChild() { 
	// 按的 tap 事件处理函数
	// 切记下面参数不能传递标签选择器test，不然返回的是 null
	const child = this.selectComponent('.bbb') // 也可以传递 id 选择器 #ccc
	child.setData({ count: child.properties.count + 1 ) // 调用子组件的 setData 方法
	child.addCount() // 调用子组件的 addCount 方法
}
2 子组件
<test class="bbb" id="ccc">2  count="{{count}}" bind:aaa="faCount"</test>