背景

在开发Vue3组件的过程中，有时候需要在父组件中操作子组件的的方法或者变量。我们可以通过ref来拿到子组件实例，然后通过这个实例来调用子组件的方法或变量。

在子组件中定义方法

<template>
    <!-- 子组件的模板内容 -->
</template>

<script setup>
// 定义一个简单的方法，这里以打印一条消息为例
const sayHello = () => {
    console.log('Hello from the child component!');
};

// 将方法暴露出去，以便父组件通过ref能够访问到
defineExpose({
    sayHello
});
</script>

在上述代码中：

• 定义了sayHello方法，其功能就是在控制台打印一条消息。
• 通过defineExpose将sayHello方法暴露出去，这样父组件才能通过ref获取并调用该方法，如果不使用defineExpose，父组件是无法访问到子组件内部定义的方法的（对变量也同样适用）。

在父组件中使用ref获取子组件实例并调用方法

接下来在父组件中使用ref来获取子组件实例，然后执行子组件的方法，示例代码如下：

<template>
    <ChildComponent ref="childComponentRef"></ChildComponent>
    <button @click="callChildMethod">Call Child Method</button>
</template>

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

// 创建ref对象来引用子组件
const childComponentRef = ref(null);

const callChildMethod = () => {
    // 通过ref获取子组件实例，并判断实例是否存在，若存在则调用子组件的方法
    if (childComponentRef.value) {
        childComponentRef.value.sayHello();
    }
};
</script>

在这个父组件的代码中：

• 首先通过import引入了ChildComponent子组件，然后使用ref创建了childComponentRef对象，用于引用子组件实例。
• 定义了callChildMethod按钮点击事件的处理方法，在该方法中，通过childComponentRef.value获取到子组件的实际实例（要先判断是否为null，确保实例已经挂载），然后调用了子组件中通过defineExpose暴露出来的sayHello方法。

这样，当点击父组件中的按钮时，就会执行子组件中定义的sayHello方法，实现了父组件通过ref来调用子组件方法的操作。