父子组件之间的通信

在微信小程序中，父组件和子组件之间需要通过特定的方式进行数据的传递与通信。微信小程序提供了几种常见的通信方式，分别用于实现父组件向子组件传递数据，或子组件向父组件发送事件及数据。父子组件之间的通信可以通过以下三种主要方式来实现：

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

父子组件之间的通信方式可以分为以下三种：

1.1 属性绑定（Prop）

• 方向：父组件 → 子组件
• 用途：父组件可以通过属性绑定的方式，将数据传递给子组件。这种方式只能传递 JSON 兼容的数据（如字符串、数字、布尔值、数组、对象等），不能传递函数。
• 适用场景：当父组件需要向子组件传递数据时。

1.2 事件绑定

• 方向：子组件 → 父组件
• 用途：子组件通过事件触发的方式，将数据发送给父组件。事件绑定的方式可以传递任意类型的数据，包括对象、数组、字符串等。
• 适用场景：当子组件需要向父组件传递数据时。

1.3 获取组件实例

• 方向：父组件 → 子组件
• 用途：父组件可以通过 this.selectComponent() 获取子组件的实例对象，然后直接访问子组件的任意数据和方法。
• 适用场景：当父组件需要直接访问子组件的内部数据或方法时。

2. 属性绑定

属性绑定是父组件向子组件传递数据的方式，适用于父组件需要将数据传递给子组件，并且这些数据是普通 JSON 兼容类型的数据。属性绑定的方式无法将函数传递给子组件。

2.1 父组件向子组件传递数据

在父组件的 wxml 中，通过属性绑定的方式向子组件传递数据，示例代码如下：

<!-- 父组件的 wxml -->
<my-component count="{{ parentCount }}"></my-component>

父组件的 js 文件中定义 parentCount：

Page({
  data: {
    parentCount: 10
  }
});

示例图：

2.2 子组件接收父组件传递的属性

在子组件的 properties 节点中声明接收的属性。子组件将通过 properties 接收父组件传递的 count 数据，并在 wxml 中使用：

Component({
  properties: {
    count: {
      type: Number,
      value: 0  // 默认值
    }
  }
});

示例图：

3. 事件绑定

事件绑定用于子组件向父组件传递数据，适用于子组件需要向父组件反馈某些数据或状态。事件绑定可以传递任意类型的数据，包括对象、数组、字符串等。

3.1 父组件定义事件处理函数

首先，在父组件的 js 文件中，定义一个事件处理函数，这个函数将通过事件绑定的方式传递给子组件，用于接收子组件传递的数据。

父组件示例代码：

Page({
  onChildEvent: function(e) {
    console.log('接收到子组件传递的数据:', e.detail);
  }
});

示例图：

3.2 父组件通过自定义事件绑定子组件

在父组件的 wxml 中，通过自定义事件的形式，将父组件定义的函数绑定给子组件。

示例代码：

<!-- 父组件的 wxml -->
<my-component bind:myEvent="onChildEvent"></my-component>

示例图：

3.3 子组件触发事件并传递数据

在子组件的 js 文件中，通过调用 this.triggerEvent('myEvent', { ... }) 方法，触发事件并将数据传递给父组件。

子组件示例代码：

Component({
  methods: {
    sendDataToParent() {
      this.triggerEvent('myEvent', { value: 42 });
    }
  }
});

示例图：

4. 获取组件实例

父组件还可以通过调用 this.selectComponent() 方法，获取子组件的实例对象。通过获取到子组件的实例，父组件可以直接访问子组件的内部数据和方法，这种方式使得父组件对子组件有更强的控制力。

4.1 父组件获取子组件实例

在父组件的 js 文件中，可以通过 this.selectComponent 方法获取子组件的实例，然后访问子组件的数据或方法。

示例代码：

Page({
  onLoad: function() {
    // 获取子组件实例
    const myComponent = this.selectComponent('#myComponent');
    
    // 调用子组件的方法
    myComponent.customMethod();
    
    // 访问子组件的数据
    console.log(myComponent.data.someData);
  }
});

4.2 子组件定义方法和数据

子组件可以在 methods 节点中定义方法，并在 data 节点中定义数据，父组件可以通过获取子组件实例后调用这些方法或访问数据。

子组件示例代码：

Component({
  data: {
    someData: '子组件数据'
  },
  methods: {
    customMethod() {
      console.log('子组件自定义方法被调用');
    }
  }
});

示例图：

总结

父子组件之间的通信在微信小程序中非常重要，常见的通信方式有属性绑定、事件绑定和获取组件实例。根据具体场景，开发者可以选择合适的方式进行父子组件间的数据和事件传递：

• 属性绑定：父组件通过属性向子组件传递数据，适合父组件向子组件下发数据。
• 事件绑定：子组件通过事件向父组件传递数据，适合子组件向父组件反馈状态或数据。
• 获取组件实例：父组件通过 this.selectComponent() 获取子组件实例，可以直接操作子组件的数据和方法，适合复杂的组件交互场景。

通过这些方式，父子组件可以实现灵活的通信和数据传递，提升了组件的复用性和维护性。