Vue2中子组件向父组件通信最常用方式是$emit触发自定义事件，子组件调用this.$emit('事件名', 参数...)，父组件用@事件名绑定监听器接收参数，需注意事件名规范、拼写一致及调用时机。
Vue2 中子组件向父组件通信，最常用也最直接的方式就是用 $emit 触发自定义事件。核心就三点：子组件发、父组件听、数据随事件一起传。
子组件里怎么触发事件
在子组件的方法中调用 this.$emit()，第一个参数是事件名（推荐用短横线命名，比如 'update-title'），后面可以跟任意多个参数，这些都会被父组件接收到。
- 事件名不要和原生 DOM 事件重名（比如
click、input），否则容易混淆或被透传覆盖 - 一次
$emit可以传多个值，比如this.$emit('data-ready', str, num, obj) - 如果只是通知父组件“发生了某事”，不传参也完全合法：
this.$emit('submit-success')
父组件怎么监听和接收
在父组件模板中，用 @事件名 或 v-on:事件名 绑定监听器，对应方法的参数顺序与 $emit 传入顺序一致。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 例如子组件写了
this.$emit('child-msg', 'hello', 100)，父组件方法就写handleMsg(msg, num) { ... } - 监听器可以直接写内联表达式，比如
@child-msg="title = $event[0]"，但更推荐用方法封装逻辑 - 注意：Vue2 不支持解构参数，不能写成
@child-msg="([msg, num]) => {...}"，得靠方法体处理
要不要显式声明 emits？
Vue2 本身不强制要求声明 emits 选项（那是 Vue3 的特性），但在大型项目中建议在子组件 export default 里加个注释或统一约定事件清单，方便维护和排查。
立即学习“前端免费学习笔记（深入）”；
- 虽然没
emits: ['xxx']校验机制，但团队可约定文档或 typescript interface 来约束事件名和参数结构 - 避免把事件名写错，比如父组件监听
@user-click，子组件却$emit('userClick')，大小写或连字符不一致就会失效 - 调试时看控制台有没有 “Failed to resolve directive: on” 或事件没响应，大概率是名字对不上
常见踩坑点
实际开发中几个高频问题：
-
事件没触发：检查子组件是否真执行了
$emit（加个console.log确认）、是否在正确时机（比如点击后而非 mounted 时） -
父组件收不到参数：确认父组件监听写法无误（
@xxx="handler"而不是@xxx="handler()"，后者会立即执行） - 事件名拼写不一致：尤其注意中英文符号、空格、大小写——Vue2 是严格字符串匹配
-
异步操作后忘记 emit：比如请求完成回调里漏掉
this.$emit(...)，数据就卡在子组件出不去
