Vue3使用ref访问子组件方法报savePaper不是函数错误解决

Vue3 的 <script setup> 语法默认是封装私有的：组件内部声明的变量、方法不会自动绑定到组件实例上对外暴露，父组件通过 ref 拿到的实例默认访问不到这些内部成员，直接调用未暴露的savePaper就会抛出“不是函数”的错误。

1. 核心修复：修改子组件代码，使用Vue提供的defineExpose编译宏显式暴露需要给父组件访问的方法
   在子组件的<script setup lang="ts">代码块末尾添加如下代码：

   defineExpose({
     savePaper
   })
   

   添加后父组件即可通过ref实例正常调用savePaper方法。

2. （可选，TS类型优化）如果需要在父组件获得完整的类型提示，可以调整父组件中ref的定义方式：

   // 替换为你项目中实际的子组件存储路径
   import FormAddNewTopical from './FormAddNewTopical.vue'
   // 给ref指定组件实例类型
   const addNewPaper = ref<InstanceType<typeof FormAddNewTopical>>()
   

如果按上述修改后仍有异常，可以检查两项配置：

• 确认父组件调用successSave方法时子组件已经完成挂载：如果在onBeforeMount等挂载前生命周期触发调用，ref值为undefined，代码中的可选链?.会静默跳过执行，不会触发子组件方法
• 确认父组件导入的FormAddNewTopical组件路径正确，没有错导为其他无关组件

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