父子之间如何互相传参？微信小程序组件通信剖析！

2023-12-28 20:30:08







**正文** 

微信小程序作为一种非常流行的前端开发框架，在近几年受到了广泛关注和使用。小程序拥有丰富的组件系统，可以帮助开发者快速搭建出各种界面。在小程序的组件系统中，父子组件之间的通信是一个非常重要的功能。通过父子组件之间的通信，我们可以将数据从父组件传递给子组件，也可以将数据从子组件传递给父组件。

**父子组件通信的实现方式** 

在微信小程序中，父子组件之间可以通过以下方式进行通信：

* **属性** ：父组件可以通过设置子组件的属性来传递数据。
* **事件** ：子组件可以通过触发事件来通知父组件。
* **间接通信** ：父子组件可以通过共同的父组件或祖先组件进行通信。
* **全局数据** ：父子组件可以通过全局数据来进行通信。

**属性** 

父组件可以通过设置子组件的属性来传递数据。子组件可以通过`this.props`属性来访问父组件传递的数据。例如，以下代码演示了如何通过属性传递数据：

```javascript
// 父组件
<view>
  <child-component foo="bar" />
</view>

// 子组件
<view>
  {{ foo }}
</view>

在上面的示例中，父组件通过设置foo属性的值为"bar"，并将这个属性传递给了子组件。子组件可以通过this.props.foo属性来访问父组件传递的数据。

事件

子组件可以通过触发事件来通知父组件。父组件可以通过监听子组件触发的事件来接收数据。例如，以下代码演示了如何通过事件传递数据：

// 父组件
<view>
  <child-component on-foo="handleFoo" />
</view>

// 子组件
<view>
  <button @click="triggerFoo">触发 Foo 事件</button>
</view>

// 子组件中的方法
methods: {
  triggerFoo() {
    this.$emit('foo', 'bar')
  }
}

// 父组件中的方法
methods: {
  handleFoo(data) {
    console.log(data) // 输出: "bar"
  }
}

在上面的示例中，子组件通过触发foo事件来通知父组件。父组件通过监听foo事件来接收数据。当子组件触发foo事件时，父组件会调用handleFoo方法，并在handleFoo方法中处理子组件传递的数据。

间接通信

父子组件可以通过共同的父组件或祖先组件进行通信。例如，以下代码演示了如何通过共同的父组件进行通信：

// 父组件
<view>
  <child-component-1 />
  <child-component-2 />
</view>

// 子组件 1
<view>
  <button @click="triggerFoo">触发 Foo 事件</button>
</view>

// 子组件 2
<view>
  {{ foo }}
</view>

// 子组件 1 中的方法
methods: {
  triggerFoo() {
    this.$parent.$emit('foo', 'bar')
  }
}

// 子组件 2 中的计算属性
computed: {
  foo() {
    return this.$parent.foo
  }
}

在上面的示例中，子组件 1 通过触发foo事件来通知父组件。父组件通过监听foo事件来接收数据。然后，父组件将数据存储在foo属性中。子组件 2 通过计算属性foo来访问父组件传递的数据。

全局数据

父子组件可以通过全局数据来进行通信。例如，以下代码演示了如何通过全局数据进行通信：

// 全局数据
const globalData = {
  foo: 'bar'
}

// 父组件
<view>
  <child-component />
</view>

// 子组件
<view>
  {{ foo }}
</view>

// 子组件中的计算属性
computed: {
  foo() {
    return globalData.foo
  }
}