谈谈vue父子组件通信方式ref与$parent/$children

在Vue中，父子组件通信是一种常见需求。本文将探讨两种常用的父子组件通信方式：ref与parent/children。

ref

ref是Vue提供的一种获取组件实例的便捷方式。在父组件中，可以通过在子组件上标签上设置属性ref，并在this.$refs中获取到子组件对象。例如：

<template>
  <div>
    <ChildComponent ref="child" />
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

通过这种方式，父组件就可以调用子组件的变量和方法，触发子组件的变更检测等操作。

parent/children

parent/children是Vue提供给组件的两个特殊属性。parent指向父组件的实例，而children则指向子组件的实例数组。例如：

<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
export default {
  methods: {
    callParentMethod() {
      this.$parent.parentMethod()
    }
  }
}
</script>

通过这种方式，子组件就可以调用父组件的变量和方法，触发父组件的变更检测等操作。

ref与parent/children的对比

ref和parent/children都是Vue父子组件通信的常用方式，但两者之间存在一些差异。

• ref获取的是单个子组件实例，而$children获取的是子组件实例数组。
• ref只能在父组件中使用，而parent/children可以在父子组件中使用。
• ref只能获取到直接子组件，而$children可以获取到所有子组件。

何时使用ref

ref通常用于以下场景：

• 父组件需要调用子组件的变量和方法。
• 父组件需要触发子组件的变更检测。
• 父组件需要获取子组件的DOM元素。

何时使用parent/children

parent/children通常用于以下场景：

• 子组件需要调用父组件的变量和方法。
• 子组件需要触发父组件的变更检测。
• 子组件需要获取父组件的DOM元素。
• 子组件需要与兄弟组件通信。

总结

ref和parent/children都是Vue父子组件通信的常用方式，但两者之间存在一些差异。在实际开发中，需要根据具体需求选择合适的通信方式。