Vue 中 emit 是子组件向父组件通信的唯一合规方式，需用 defineEmits 声明事件名后调用 emit 发送；父组件通过 @事件名 监听，支持 Promise 异步响应与 TypeScript 类型约束。
Vue 中的 emit 是子组件向父组件“说话”的唯一合规方式，不是可选项，而是单向数据流下必须走的上行通道。它不负责修改父数据，只负责发出信号和附带信息；父组件收到后，自行决定是否以及如何更新状态。
怎么正确触发一个 emit 事件
在组合式 API（setup）中，必须先用 defineEmits 声明允许触发的事件名，再调用 emit 函数发送：
- 显式声明更安全：比如
const emit = defineEmits(['submit', 'cancel'])，IDE 能自动提示，运行时也能校验非法事件 - 触发写法统一：
emit('submit', payload)，其中payload可以是任意类型——字符串、对象、数组，甚至多个参数（emit('update', name, age, email)） - 事件命名推荐短横线格式（kebab-case），如
user-updated，避免与原生 DOM 事件冲突，也更符合 Vue 官方约定
父组件怎么监听并接收数据
监听靠模板中的 @事件名 语法，本质是给子组件绑定一个事件处理器：
- 写法示例：
<childcomponent></childcomponent> - 父组件方法接收参数：如果子组件发的是
emit('user-updated', { id: 1, name: '李四' })，那么onUserUpdate函数签名就该是(data) => { ... }，直接解构即可 - 注意别写成
v-on="$emit()"这类常见错误——那是把监听逻辑写反了，$emit 只属于子组件内部
用 Promise 实现异步响应反馈
当父组件需要“等结果”再执行后续动作（比如表单提交后弹提示、校验失败则聚焦输入框），可以返回 Promise 给子组件：
- 父组件方法返回 Promise：
const handleSubmit = async (form) => { const res = await api.submit(form); return res.success ? 'ok' : Promise.reject('提交失败') } - 子组件用
await emit('submit', form)捕获返回值或错误，实现同步等待语义 - 这种模式让父子协作更可控，尤其适合模态框、弹窗、表单等需强交互流程
类型安全与调试要点
TypeScript 用户可为 defineEmits 加泛型，提前锁定事件名和参数结构：
- 例如：
const emit = defineEmits() - 控制台报错是第一线索：若事件没被监听，Vue 不会报错，但控制台会提示
[Vue warn] Component emitted event "xxx" but it is not declared，说明漏了defineEmits声明 - 调试技巧：在子组件
emit前加console.log，在父组件 handler 入口加断点，确认是否真正触发和抵达
