$refs 与 $parent：Vue 组件通信的艺术

在 Vue.js 开发中，父子组件之间的通信是构建复杂应用时不可避免的问题。通常，我们可以通过 props 和 $emit 来实现父子组件之间的数据传递，但这些方法在某些场景下显得不够灵活，尤其是在需要直接操作子组件实例或父组件数据时。那么，有没有更高效、更直接的方法呢？答案是肯定的。今天，我们将通过一个实际的开发场景，深入探讨 Vue 中的 $refs 和 $parent，它们分别用于父传子和子传父的通信。

场景引入：父子组件的交互需求

假设我们正在开发一个家庭管理系统，其中包含一个父组件 Family 和两个子组件 Child1 和 Child2。父组件负责管理家庭的房产信息，而子组件则分别管理每个孩子的玩具和书籍信息。我们的目标是实现以下功能：

1. 父组件修改子组件数据：父组件需要能够直接修改子组件中的玩具或书籍信息。

2. 子组件修改父组件数据：子组件需要能够直接减少父组件中的房产数量。

3. 批量操作所有子组件：父组件需要能够批量修改所有子组件中的书籍数量。

一、$refs：父传子的高效实现

在 Vue 中，父子组件之间的通信通常依赖于 props 和 $emit，但这些方法在某些场景下显得不够直接。例如，当父组件需要直接操作子组件的内部数据时，$refs 提供了一种更灵活的解决方案。

1. 使用 ref 标识子组件

在 Vue 中，ref 是一个特殊的属性，用于为组件或 DOM 元素提供一个唯一的引用。通过 ref，父组件可以轻松地获取子组件的实例，并直接操作其内部数据或方法。在我们的场景中，父组件可以通过为子组件绑定 ref 来获取它们的实例：

<template>
  <div>
    <Child1 ref="child1" />
    <Child2 ref="child2" />
  </div>
</template>

在父组件中，我们可以通过 this.$refs.child1 和 this.$refs.child2 来访问子组件的实例。

2. 使用 $refs 批量操作子组件

$refs 是 Vue 提供的一个特殊变量，它允许父组件一次性获取所有子组件的实例对象。这些实例对象被存储在一个对象中，其键为子组件的 ref，值为对应的子组件实例。通过 $refs，父组件可以批量操作多个子组件，而无需逐个通过 ref 获取实例。

例如，假设父组件希望修改所有子组件中的书籍数量，可以使用以下代码：

methods: {
  updateAllChildrenBooks() {
    for (const key in this.$refs) {
      this.$refs[key].books += 2;
    }
  }
}

这种方式不仅简化了代码，还提高了开发效率。

二、$parent：子传父的直接机制

与父传子类似，子组件有时也需要向父组件传递数据或通知父组件执行某些操作。在 Vue 中，这通常是通过 $emit 事件来实现的。然而，$parent 提供了一种更为直接的方式，允许子组件直接访问父组件的实例并操作其数据。

1. 使用 $parent 访问父组件

在子组件中，可以通过 $parent 访问父组件的实例。这种方式使得子组件可以直接读取或修改父组件的数据，而无需通过事件传递。例如，假设父组件有一个名为 house 的属性，子组件可以通过以下方式直接修改它：

methods: {
  reduceParentHouse() {
    this.$parent.house--;
  }
}

这种方式在某些场景下非常高效，尤其是在需要快速操作父组件数据时。

当然在父的vue组件中我们需要通过defineExpose来暴漏出house，这样子组件才能修改。

2. 场景应用：子组件减少父组件的房产数量

在我们的家庭管理系统中，子组件可以通过点击按钮直接减少父组件中的房产数量。在子组件中，我们可以添加一个按钮并绑定点击事件：

<template>
  <div>
    <button @click="reduceParentHouse">干掉父亲的一套房产</button>
  </div>
</template>

<script>
export default {
  methods: {
    reduceParentHouse() {
      this.$parent.house--;
    }
  }
}
</script>

通过这种方式，子组件可以直接操作父组件的数据，而无需通过 $emit 事件传递。

三、最佳实践与建议

虽然 $refs 和 $parent 提供了强大的工具来实现父子组件之间的通信

1. 尽量使用 props 和 $emit：在大多数情况下，父子组件之间的通信可以通过 props 和 $emit 来实现。这种方式使得组件之间的关系更加清晰，便于维护和扩展。

2. 谨慎使用 $refs 和 $parent：虽然这两种机制提供了强大的功能，但它们也增加了组件之间的耦合度。

3. 封装与解耦：如果需要在多个子组件中复用某些逻辑，建议将这些逻辑封装为独立的组件或工具函数，以减少组件之间的直接依赖。

四、总结

在 Vue.js 开发中，父子组件之间的通信是构建复杂应用时的核心问题之一。通过一个家庭管理系统的真实场景，我们探讨了 $refs 和 $parent 的应用。这两种机制分别用于父传子和子传父的通信。但是，为了保持代码的清晰和可维护性，建议在实际开发中谨慎使用