微信小程序父子组件之间通信的 3 种方式

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

① 属性绑定
⚫ 用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
② 事件绑定
⚫ 用于子组件向父组件传递数据，可以传递任意数据
③ 获取组件实例
⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

下面给出三种方式的代码示例：

1. 属性绑定：

在父组件的 wxml 文件中：

<child-component data="{{dataFromParent}}"></child-component>

在父组件的 js 文件中：

Page({
  data: {
    dataFromParent: {
      name: 'Alice',
      age: 25
    }
  }
});

在子组件的 properties 中定义：

Component({
  properties: {
    data: {
      type: Object,
      value: {}
    }
  }
});

2. 事件绑定：

在子组件的 wxml 文件中触发事件：

<button bindtap="sendDataToParent">发送数据到父组件</button>

在子组件的 js 文件中定义事件：

Component({
  methods: {
    sendDataToParent: function() {
      this.triggerEvent('sendData', {name: 'Bob', age: 30});
    }
  }
});

在父组件的 wxml 文件中绑定事件：

<child-component bind:sendData="handleReceiveDataFromChild"></child-component>

在父组件的 js 文件中定义事件处理函数：

Page({
  handleReceiveDataFromChild: function(event) {
    console.log(event.detail); // 输出：{name: "Bob", age: 30}
  }
});

3. 获取组件实例：

在父组件的 js 文件中获取子组件实例：

Page({
  onLoad: function() {
    this.child = this.selectComponent('#child');
  },
  handleButtonClick: function() {
    console.log(this.child.data); // 输出子组件的 data 属性
    this.child.doSomething(); // 调用子组件的 doSomething 方法
  }
});

在子组件的 wxml 文件中给组件添加 id：

<view id="child"></view>

在子组件的 js 文件中定义方法：

Component({
  methods: {
    doSomething: function() {
      console.log('子组件执行了 doSomething 方法！');
    }
  }
});