父组件应使用 ref 调用子组件方法，而非 emit；ref 直接获取实例并调用，语义清晰、官方推荐，而 emit 仅用于子组件向父组件发送事件通知，二者定位不同、不可替代。
Vue.js 中父组件想手动调用子组件的方法，ref + methods 是最直接的方式，而 emit 本质是子组件向父组件“发消息”，不能反向调用方法。二者定位不同，不是替代关系，更不是“对比优劣”的问题——误用 emit 实现“父调子”会导致逻辑错位、代码难维护。
✅ 正确做法：用 ref 获取子组件实例并调用方法
这是 Vue 官方推荐且语义清晰的方案。父组件通过 ref 拿到子组件实例（Options API）或组件暴露的 expose 方法（Composition API），再直接调用其定义的方法。
-
Options API 示例：
子组件中定义methods: { doSomething() { ... } }；
父组件模板写
父组件中this.$refs.child.doSomething()即可触发。 -
Composition API（Vue 3）示例：
子组件用defineExpose({ doSomething })显式暴露方法；
父组件用const child = ref(null)+
调用时写child.value?.doSomething()。
❌ emit 不适合“父调子”，原因很明确
emit 是子组件内部主动触发事件、通知父组件“我发生了什么”，比如 this.$emit('submit', data) 或 emit('update:modelValue', value)。它没有执行权、不携带函数引用、也不具备调用子组件私有逻辑的能力。
- 试图让父组件监听一个自定义事件，再在事件回调里“反过来调用子组件方法”，属于绕路设计，破坏单向数据流和职责边界；
- 若强行用
emit模拟调用（如emit('call-do-something')），子组件还需额外监听并响应——这等于自己给自己发指令，冗余且易出错； - 调试困难：调用链变成“父 → emit → 子监听 → 执行”，远不如
ref直接调用直观可控。
⚠️ 什么时候 emit 才该用？看场景
emit 的核心价值在于子组件驱动的状态反馈，典型场景包括：
- 表单子组件提交后，通知父组件“请保存”（
emit('submit', formData)）； - 弹窗子组件关闭时，告诉父组件“用户点了确定”（
emit('confirm')）； - 子组件内部状态变更需同步给父（如分页器跳转页码，
emit('page-change', 3)）。
? 补充：跨层级或解耦需求怎么办？
如果父子关系不直接（如孙子组件）、或希望降低耦合，可考虑：
- provide / inject：父提供一个带方法的对象，深层子组件 inject 后调用（适合固定上下文）；
- EventBus 或 pinia store：用全局状态或事件总线中转，但要谨慎，避免难以追踪；
- props 回调函数：父传一个函数给子，子在合适时机执行（本质仍是子驱动，非父主动调用）。
父组件需要主动触发子组件行为时，ref 是标准解法；emit 是子组件表达意图的通道。选错方式，不是技术不行，而是对 Vue 响应式设计思想的理解偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
