Vue组合式API中如何访问子组件defineExpose暴露的方法

常见问题及解决方法 #

1. 调用时机过早，ref未指向子组件实例 #

组件挂载完成前，ref.value的值为undefined，直接调用子组件方法会失败。需确保在组件挂载后再执行调用：

import { ref, onMounted } from 'vue';
import Hero from './Hero.vue';

const heroRef = ref<InstanceType<typeof Hero> | null>(null);

const clearChildSearch = () => {
  heroRef.value?.clearSearch();
};

// 组件挂载后安全调用
onMounted(() => {
  clearChildSearch();
});

2. ref绑定拼写错误 #

检查父组件模板中ref属性名是否与脚本中声明的变量名完全一致：

<template>
  <!-- 模板中的ref需与脚本里的heroRef严格对应 -->
  <Hero ref="heroRef" />
</template>

3. 子组件处于条件渲染中 #

如果子组件通过v-if控制显示状态，当条件不满足时ref.value为undefined，调用方法前必须先判断实例是否存在：

const clearChildSearch = () => {
  if (heroRef.value) {
    heroRef.value.clearSearch();
  }
};

4. TypeScript类型声明缺失（可选优化） #

使用TypeScript时，未指定ref类型可能导致编辑器报错（不影响运行，但影响开发体验），可通过InstanceType指定子组件实例类型：

const heroRef = ref<InstanceType<typeof Hero> | null>(null);

子组件暴露逻辑验证 #

你的Hero.vue中defineExpose写法完全正确，已成功暴露clearSearch方法：

defineExpose({
  clearSearch,
});

内容的提问来源于stack exchange，提问作者Krushna Balbhim Modhave