vue3中通过ref和$parent结合defineExpose实现父子组件之间的通信

Vue 3 中通过 ref 和 $parent 的结合使用，可以很方便地实现父子组件之间的通信。通过 ref，父组件可以获取子组件实例，并调用其方法或访问其属性。而通过 $parent，子组件可以获取父组件的实例，从而实现父子之间的数据传递和方法调用。同时，我们还可以使用 defineExpose 方法来向外暴露组件的属性，以供组件调用。本篇文章将会深入探讨这些技术细节，帮助你更好地理解 Vue 3 中父子组件之间的通信机制。

一、父组件通过ref获取子组件的实例

假设我们有一个父组件 Parent 和一个子组件 Child，需要在它们之间进行通信。可以通过以下步骤实现：

1. 在父组件中使用 ref 获取子组件的实例：

<template>
  <Child ref="childRef" />
</template>

<script setup>
  import Child from './Child.vue';
  const childRef = ref(null);

  onMounted(() => {
    console.log(childRef.value); // 打印子组件实例
  });
</script>

2. 在子组件中使用 defineExpose 向外暴露属性：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  const message = ref('hello');

  defineExpose({
    getMessage() {
      return message.value;
    }
  });
</script>

3. 在父组件中调用子组件的方法获取属性：

<template>
  <Child ref="childRef" />
  <button @click="getChildMessage">获取子组件属性</button>
</template>

<script setup>
  import Child from './Child.vue';
  const childRef = ref(null);

  const getChildMessage = () => {
    console.log(childRef.value.getMessage()); // 打印子组件的 message 属性
  };
</script>

这样就实现了父子组件之间的通信。在子组件中通过 defineExpose 向外暴露属性，父组件通过 ref 获取子组件实例，再调用子组件的方法获取属性。

二、子组件通过$parent获取父组件的实例

在 Vue 3 中，我们可以使用 <script setup> 的语法来编写组件，同时也可以使用 defineExpose 来向外暴露组件的属性。

下面是一个简单的例子：

• 父组件

<template>
  <child-component :msg="message"></child-component>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'

const message = 'Hello, World!'

defineExpose({
  message
})
</script>

在这个例子中，父组件 ParentComponent 引入了子组件 ChildComponent，并传递了一个 msg 属性。在 <script setup> 中，我们定义了一个 message 变量，并通过 defineExpose 方法将其暴露出去。这样，在子组件中就可以通过 $parent 属性获取到父组件的实例，并访问 message 变量了。

下面是子组件的代码：

• 子组件

<template>
  <div>
    <p>{{ msg }}</p>
    <button @click="handleClick($parent)">Click me!</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const handleClick = ($parent) => {
  // 通过$parent访问父组件向外暴露的message
  console.log($parent.message)
}

const props = ['msg']
</script>

在子组件中，我们使用 ref 声明了一个 handleClick 方法，在这个方法中可以通过 $parent 属性访问到父组件的实例，并获取到父组件暴露的 message 变量。

在父子组件之间通信时，其实还可以使用 emits 和 v-model 等方式，具体使用哪种方式应视具体情况而定。

三、总结

总而言之，Vue 3 中通过 ref 和 $parent 的结合使用，以及 defineExpose 的方法，可以非常便捷地实现父子组件之间的通信。在实际开发中，合理运用这些技术，可以有效地提高组件之间的耦合性，加快开发效率，并且在一定程度上提高代码的可维护性和可读性。希望本篇博客文章能够对读者有所帮助，感谢您的阅读！