在 Vue3 的开发中，组件化是其核心思想之一。父子组件之间的通信是常见的需求，而父组件调用子组件的方法也是开发中经常遇到的场景。本文将详细介绍如何在 Vue3 中实现父组件调用子组件的方法，并结合代码示例进行讲解。

一、为什么需要父组件调用子组件方法？

在实际项目中，父组件可能需要主动触发子组件中的某些逻辑。例如：

• 父组件控制子组件的状态更新。
• 父组件需要调用子组件中的某个业务逻辑函数。
• 父组件触发子组件的表单校验或重置操作。

Vue3 提供了多种方式来实现这一需求，最常用的方式是通过 ref 和 defineExpose 来完成。

二、实现步骤

1. 子组件暴露方法

在 Vue3 中，子组件可以通过 defineExpose 将内部的方法或属性显式地暴露给父组件。这是组合式 API 的一个重要特性。

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>我是子组件</p>
  </div>
</template>

<script setup>
// 定义一个方法
const sayHello = () => {
  console.log('Hello from child component!');
};

// 暴露方法给父组件
defineExpose({
  sayHello
});
</script>

在这里，我们使用 defineExpose 将 sayHello 方法暴露给了父组件。

2. 父组件获取子组件实例并调用方法

在父组件中，我们可以通过 ref 获取子组件的实例，并调用其暴露的方法。

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>我是父组件</h1>
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

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

// 创建一个 ref 引用子组件
const childRef = ref(null);

// 调用子组件的方法
const callChildMethod = () => {
  if (childRef.value) {
    childRef.value.sayHello();
  }
};
</script>

在上面的代码中：

1. 我们通过 ref="childRef" 给子组件绑定了一个引用。
2. 在 callChildMethod 方法中，通过 childRef.value 访问子组件实例，并调用其暴露的 sayHello 方法。

三、注意事项

1. 使用 <script setup> 时的差异

如果子组件和父组件都使用 <script setup>，那么 ref 的使用方式与普通写法一致。需要注意的是，只有通过 defineExpose 暴露的内容才能被父组件访问到。

2. 避免滥用

虽然父组件可以调用子组件的方法，但这并不意味着应该频繁这样做。过度依赖这种方式可能会导致组件之间的耦合性增加，违背了组件化设计的原则。建议仅在必要时使用。
我们更应该通过事件机制让子组件主动通知父组件，而不是父组件直接调用子组件的方法。这种方式更加符合 Vue 的单向数据流设计原则。