Vue3 如何获取子组件实例

在 Vue3 的开发过程中，获取子组件实例是一个常见的需求。这有助于我们在父组件中直接调用子组件的方法、访问其数据和属性，从而实现更加灵活和高效的组件通信与交互。

在 Vue3 中，可以使用 ref 和 $refs 来获取子组件实例。在父组件模板中，给子组件添加一个 ref 引用，例如：

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

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);
</script>

这样，childRef 就指向了子组件实例。在需要使用子组件实例的地方，比如在一个方法中，可以通过 childRef.value 来访问子组件实例及其属性和方法。例如，假设子组件有一个 doSomething 方法：

<template>
  <button @click="callChildMethod">调用子组件方法</button>
  <ChildComponent ref="childRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const childRef = ref(null);

const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.doSomething();
  }
};
</script>

另外，Vue3 还提供了 provide 和 inject 这对 API 来实现跨级组件通信，虽然不是直接获取子组件实例，但在某些场景下也能满足需求。在父组件中使用 provide 提供数据或方法：

<template>
  <ChildComponent />
</template>

<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

const someData = '这是父组件的数据';
const someMethod = () => {
  console.log('这是父组件的方法');
};

provide('dataFromParent', someData);
provide('methodFromParent', someMethod);
</script>

在子组件中使用 inject 注入：

<template>
  <div>
    <p>{{ dataFromParent }}</p>
    <button @click="methodFromParent">调用父组件方法</button>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const dataFromParent = inject('dataFromParent');
const methodFromParent = inject('methodFromParent');
</script>

通过这些方法，我们可以在 Vue3 中根据具体需求灵活地获取子组件实例或实现组件间的通信与交互，为构建复杂的应用程序提供了强大的支持。