小程序父子组件之间的通信以及实时触发子组件数据更新小程序父子组件之间的通信以

前言小程序父子组件直接的通信以及实时触发子组件数据更新

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
子组件使用observers做数据监听，可以用于监听和响应任何属性和数据字段的变化。从小程序基础库版本 2.6.1 开始支持。

一、父组件传递给子组件传值

this.setdata({// 必须使用this.setData()赋值 staffInfo: 'xxx', })properties: { info: { type: String,// 数据类型校验 value: '',// 默认字符串 } }

一般情况下如果中的变量没有涉及到更改view试图，不建议使用this.setData()赋值，直接使用this.data.xx = xx；有利于小程序性能，但是和页面有交互的变量必须使用this.setData()，包括给子组件传值
二、子组件传值给父组件

this.triggerEvent('customevent', { callBack: 'partake' })// custoevent: 事件， {}中的内容是给父组件穿的值fetActiveDetail(call) {}// call子组件传递上来的数据

三、父组件直接获取子组件数据
这里我们需要给子组件设置一个id，使用this.selectComponent，这里我们只讨论该方法，自定义组件使用方法还有很多，具体可以参考这里，熟读文档还是很有必要的。

this.selectComponent('#launch')// 获取的值可以参看下图

文章图片
image
这样父组件就拿到了子组件的所有属性，和方法了。想获取子组件什么直接用。看起来很方便
四、子组件使用observers做数据监听，根据父组件动态数据实时更新子组件UI

// 写法一：可以监听多个属性 observers: { 'canvasUrl'(data){// canvasUrl: 父组件传递过来的值 console.log('路径变化了') } }, data: { name: "partake", },// 写法二：只监听单个属性 properties: { canvasUrl: { type: String, value: '', observer(nv, ov, path) { if (nv) { this.setData({ img: nv }) } } }, },

【小程序父子组件之间的通信以及实时触发子组件数据更新】这种模式下，父组件数据更新，子组件也跟着变化