Vue3组合式API：如何在父组件调用子组件内部函数？

要实现父组件直接调用子组件的函数，你需要通过子组件暴露函数 + 父组件获取子组件实例的方式来实现，具体步骤如下：

1. 修改子组件Food.vue，暴露目标函数和响应式变量 #

注意：你原代码里的food是普通变量，不具备响应式特性，需要改成ref才能触发视图更新；同时要用defineExpose把要调用的函数暴露给父组件：

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

// 改为响应式变量
const food = ref("blueberry")

function changeFood () {
    food.value = "cherry";
}

// 显式暴露函数给父组件
defineExpose({
  changeFood,
  food
})
</script>

<template>
    <div>{{food}}</div>
</template>

2. 父组件Page.vue中获取子组件实例并调用函数 #

给子组件标签添加ref属性，通过ref获取子组件实例后，就能直接调用暴露的函数：

<script setup>
import { onMounted, ref } from "vue";
import Food from "@/components/Food.vue";

// 创建子组件的ref实例
const foodComponent = ref(null)

onMounted(async() => {
    // 调用子组件暴露的changeFood函数
    foodComponent.value.changeFood()
});
</script>

<template>
    <!-- 添加ref属性关联实例 -->
    <Food ref="foodComponent"></Food>
</template>

关键说明 #

• defineExpose是Vue3 <script setup>语法的专属API，用来显式对外暴露组件内部的属性或函数，否则父组件无法访问子组件内部的内容。
• 不能通过直接导入组件文件的方式调用内部函数（导入的是组件的定义，不是运行时的实例），必须通过子组件的ref实例来调用。

内容的提问来源于stack exchange，提问作者hehe