在 Vue 组件通信中，最常见也最直接的方式，就是让子组件通过$emit触发自定义事件，再由父组件使用@事件名进行监听。不过这里有几个关键细节一定不能忽略：事件需要显式声明，命名建议统一使用短横线形式，而且父子组件两端的事件名必须完全一致。只要拼写出现偏差，或者异步触发时机处理不当，问题通常就会随之出现。
子组件如果需要把数据传递给父组件，最常见、也最实用的做法，就是通过 $emit 派发一个自定义事件，再由父组件使用 @事件名 进行监听和处理。简单来说，这并不是什么复杂技巧，而是 Vue 官方约定好的组件通信机制：子组件负责“发出通知”，父组件负责“接收并处理通知”。
子组件怎么正确 emit
在实际开发中，事件必须先声明再触发，尤其是在 setup 中，需要通过 defineEmits 显式定义事件列表。否则不仅 TypeScript 容易报错，IDE 也无法提供有效提示，运行时排查问题也会更加困难。
- 事件名建议统一使用短横线格式（如
submit-form），尽量避免驼峰写法（submitForm）——因为 HTML 模板中的属性名不区分大小写，驼峰命名在模板里很容易失效 - 触发事件时可直接调用：
emit('submit-form', formData)，同时支持传递多个参数，父组件中的监听函数会按照顺序接收这些值 - 常见触发时机包括：按钮点击之后、表单校验通过之后、异步请求成功返回之后（注意不要在请求完成前就执行
emit，否则传递出去的可能是空值或undefined）
父组件怎么可靠监听
父组件监听的事件名必须与子组件 emit 时使用的事件名完全一致（包括短横线写法和大小写形式），否则就会静默失效——控制台通常不会报错，但事件逻辑不会执行，这也是 Vue 自定义事件调试中最常见的问题之一。
- 模板中的标准写法：
- 既可以绑定普通方法，也可以使用内联赋值（
@close-dialog="show = false"），或者通过解构方式接收参数（@item-click="({ id, type }) => selectedId = id"） - 如果使用
v-model，本质上依然是基于$emit实现：Vue 3 对应的是update:modelValue，Vue 2 对应的是input；如果是自定义 v-model 名称（如v-model:title），那么对应的事件名就是update:title
容易忽略的关键细节
下面这些并不是少见的边缘情况，而是在 Vue 项目开发中非常高频的常见坑点：
- 拼写不一致：子组件写的是
emit('user-update')，父组件却写成@userUpdate→ 事件不会触发 - 异步时机错误：例如在
await api.submit()之前就先执行emit→ 传递出去的仍然是初始值 - 未声明就直接使用：在
setup中没有调用defineEmits→ TypeScript 会出现类型报错，同时也拿不到 IDE 自动补全 - 监听函数未定义或方法名拼写错误：父组件
methods中漏写了handleSa ve，或者误写成handelSa ve→ 控制台会直接报TypeError
