Vue 中 emit 本身同步，但可通过父子约定实现“子触发→父处理→子获知结果”闭环：父组件事件处理器返回 Promise，子组件 await emit 即可等待并获取结果。
Vue 中 emit 本身是同步的，不返回 Promise，但通过父子约定机制，完全可以实现“子触发 → 父处理 → 子获知结果”的闭环流程。关键不是让 emit 变成异步，而是让父组件的处理逻辑可被等待、可被响应。
父组件返回 Promise，子组件 await emit
这是最简洁、最符合 Vue 3 组合式 API 风格的做法。前提是父组件监听的方法明确返回 Promise：
- 父组件中，事件处理器写成
async函数，并return一个 Promise（成功或失败） - 子组件调用
await emit('submit', formData)，就能自然等待父组件处理完毕并拿到返回值 - 父组件内部可调用 API、校验、弹窗确认等异步操作，最终
resolve或reject
示例：父组件的 @submit="handleSubmit" 方法如下：
const handleSubmit = async (form) => {
const res = await api.saveUser(form)
if (res.code === 0) return { ok: true, id: res.data.id }
throw new Error(res.message)
}
子组件中直接：
const onSubmit = async () => {
try {
const result = await emit('submit', formData)
console.log('保存成功', result)
} catch (err) {
console.error('保存失败', err.message)
}
}
子组件传入 resolve/reject 回调
适用于需要更精细控制 Promise 生命周期的场景，比如父组件要决定何时 resolve（例如用户点击弹窗“确定”后）：
- 父组件创建 Promise，把
resolve和reject作为载荷的一部分，通过emit传给子组件 - 子组件在
defineEmits中声明该事件（如['request-confirm']），并在事件回调里保存这两个函数 - 当子组件完成某操作（如动画结束、校验通过），主动调用
resolve(data)或reject(err) - 父组件
await原始 Promise 即可得到结果
用 defineExpose 暴露异步方法（替代 emit）
如果通信逻辑较重、事件语义不够清晰，可换一种思路：不依赖 emit 触发，而是让父组件直接调用子组件的异步方法：
- 子组件用
defineExpose暴露一个返回 Promise 的函数，如confirmUpload() - 父组件用
ref拿到子组件实例，调用该方法并await - 这样更像“调用一个服务”，适合模态框、表单验证器等有明确行为边界的子组件
注意事项与避坑点
实际使用时要注意几个常见问题：
- 别在父组件监听中写
v-on="$emit()"—— 这是方向反了，$emit只属于子组件内部 - 事件名推荐用短横线格式（如
file-validated），避免和原生事件（如click）冲突 - TypeScript 下，用
defineEmits()明确参数类型，IDE 和运行时都能校验 - 如果父组件方法没返回 Promise，子组件
await emit(...)会立即 resolveundefined，需确保父端契约一致
