Vue 3 中 ref 获取子组件实例并调用方法的核心是：父组件需声明并绑定 ref（如 ref="childRef"），且在挂载后通过 childRef.value?.method() 调用；子组件必须用 defineExpose({ method }) 主动暴露方法，否则无法访问。
在 Vue 3 中，用 ref 获取子组件实例并调用其方法，核心就两点：父组件正确绑定和访问 ref，子组件必须用 defineExpose 主动暴露方法。直接绑 ref 却拿不到方法，几乎都是因为漏了暴露这一步。
父组件：声明 ref 并绑定到子组件标签上
在 <script setup></script> 中，先声明一个空 ref，再在模板中通过 ref="xxx" 绑定到子组件标签：
- 用
ref(null)初始化（类型安全可加泛型，如ref）| null>(null) - 绑定时写法是
:ref或v-bind:ref - 访问时机很重要：组件挂载后（
onMounted）childRef.value才有值；提前访问会是null
子组件：必须用 defineExpose 显式暴露方法
Vue 3 的 <script setup></script> 默认封闭内部逻辑——即使父组件拿到实例，也无法访问未暴露的变量或函数：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 在子组件中，把想让父组件调用的方法（如
submitForm、reset）写进defineExpose({})里 - 只暴露需要的项，不暴露的依然不可见，这是设计上的封装保护，不是 bug
- 暴露响应式数据（如
ref或computed）也一样处理，例如defineExpose({ count, isActive })
调用示例：触发子组件校验或弹窗
常见真实场景下，调用逻辑通常写在父组件的方法中：
- 点击按钮时检查
childRef.value是否存在，再调用方法：childRef.value?.validate() - 如果子组件方法返回 Promise（如表单异步校验），父组件可直接
await childRef.value?.validate() - 传参调用也完全支持，比如
childRef.value?.openModal({ title: '编辑用户' })
常见错误与排查点
遇到 undefined 或 “not a function” 时，优先检查这几处：
- 子组件是否遗漏
defineExpose？这是最常见原因 - 父组件是否在
onMounted之后才尝试调用？setup 同步执行时 DOM 和子组件都还没就绪 - ref 变量名是否和模板中
ref="xxx"完全一致（大小写、拼写） - 子组件是否用了
<script setup></script>？Options API 写法无需defineExpose，但需确保return中包含对应方法
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
