[小程序开发] 组件通信

一、数据监听

        用于监听和响应任何属性和数据的变化，当数据发生变化时，就会触发对应回调函数，从而方便开发者进行业务逻辑的处理。

        在组件中，如果需要进行数据监听，需要使用observers字段。

observers:{
        // key:需要监听的数据
        // value:一个回调函数，形参-最新的数据
        // 监听一个数据
        num:function(newNum){
            console.log(newNum)
        }
}

二、 父往子传值

        1、在父组件WXML中使用数据绑定的方式向子组件传递动态数据。

        2、子组件内部使用properties接收父组件传递的数据即可。

properties: {
      // 默认复选框为未被选中的效果,如果希望复选框被选中,传递属性(checked=true)到复选框组件
        checked:{
            type:Boolean,
            value:false
        }

    }

三、子往父传值

        通过小程序提供的事件系统实现，可以传递任意数据。

        1、自定义组件内部使用triggerEvent方法发射一个自定义的事件，同时可以携带数据。

        2、自定义组件标签上通过bind方法监听发射的事件，同时绑定事件处理函数，在事件函数中通过事件对象获取传递的数据。

    sendData(){
      // 使用triggerEvent发射自定义事件将数据传递给父组件,第一个参数为自定义事件,第二个参数为要传递的数据
           this.triggerEvent('myevent',this.data.num)
    }

四、获取组件实例

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

        this.selectComponent方法在调用时需要传入一个匹配选择器selector。

    getData(){
        // this.selectComponent获取子组件实例对象，获取到实例对象以后，就可以获取子组件所有的数据，同时也可以调用子组件的方法
        //.child为组件类名
        const res=this.selectComponent('.child')
        console.log(res)
    }