微信小程序父页面与子组件通信

父向子组件传递数据

1、在父页面的js中定义需要传递的数据

data:{
   message: 'hello'
}

2、在父页面的wxml中使用子组件，并写上要传递的数据，这部分和vue很相似

<child-component message="{{message}}"></child-component>

3、在子组件的js文件中，使用properties定义接收父组件传递数据的属性

properties: {
  message: {
    type: String,
    value: ''
    // 不监听数据更新的话，observer部分可以去掉
    observer(newVal, oldVal) {
      // 属性值变化时执行
      this.setData({
        infoId: newVal
      })
    }
  },
}

注意：如果需要更新子组件中的数据，可以在父组件中使用setData()方法更新数据，同时子组件要使用observer组件数据字段监听器，然后子组件就能监测到数据变化。

子组件向父传递数据

1、父页面中定义一个方法，用于接受子组件传来的数据

OnGetChildData(info){
    let {
      detail
    } = info
    console.log('收到子组件数据：', detail)
}

2、在父页面的wxml中使用子组件，并绑定事件

<child-component bind:getChildData="OnGetChildData"></child-component>

3、在子组件中触发父组件中定义的方法，并将需要传递的数据作为参数传递过去，注意这里只能传递一个参数

this.triggerEvent('getChildData', value)

---

更多内容可以看👉官网文档