父组件调用子组件方法需子组件用 defineexpose 显式暴露（如 defineexpose({ validate, reset })），父组件通过 ref 绑定并调用 childref.value.validate()，注意空值判断和挂载时机。
Vue 3 中，父组件要直接调用子组件的方法（比如触发表单验证、重置输入、播放动画等），核心就两点：子组件用 defineExpose 主动暴露方法，父组件用 ref 拿到实例后调用。这不是自动开放的，必须显式声明。
子组件必须用 defineExpose 显式暴露
setup 语法糖下组件默认私有，即使内部定义了方法，父组件也完全访问不到。暴露是强制步骤，且只能暴露你写进 defineExpose({}) 里的内容。
- 暴露一个方法：
defineExpose({ validate }) - 暴露多个方法和响应式数据：
defineExpose({ validate, reset, formState }) - 暴露的变量或函数必须已在上方声明，否则会报错
- 不写
defineExpose，父组件通过 ref 只能得到undefined或空对象
父组件用 ref 绑定并调用
ref 名称需与 setup 中定义的 ref 变量名一致，且要在模板中提前绑定；调用时注意加 .value 访问实际暴露的对象。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 在模板中写：
<childcomponent ref="childRef"></childcomponent> - 在 script 中声明：
const childRef = ref() - 调用方法：
childRef.value.validate()或childRef.value.reset() - 如果子组件还没挂载完成，
childRef.value可能为 null，建议加空值判断
常见使用场景示例
这类通信最适合需要“主动控制”的逻辑，比如表单校验、编辑器聚焦、模态框开关、图表刷新等。
-
表单验证：子组件封装 ElForm，暴露
validate()方法，父组件点击“提交”时统一触发 -
富文本编辑器：子组件封装 Tiptap 或 Quill，暴露
focus()、setContent()，父组件在 Tab 切换后自动聚焦 -
自定义弹窗：子组件管理 visible 状态，暴露
show()和hide()，父组件按业务条件控制显隐
不推荐替代方案说明
有人尝试用 $parent 在子组件里反向调用父方法，或用全局事件总线，这些方式耦合高、难维护、破坏响应式原则。
-
$parent不稳定，且 Vue 3 中已不鼓励直接使用 - emit + v-model 更适合“子传父”的数据反馈，不是“父控子”的行为驱动
- provide/inject 适用于跨多层或插槽场景，对简单父子调用属于过度设计
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
