Emit 与 Promise 结合怎么写？实现“子组件触发-父组件处理-子组件得知结果”-Vue.js-PHP中文网

Vue 中 emit 本身同步，但可通过父子约定实现“子触发→父处理→子获知结果”闭环：父组件事件处理器返回 Promise，子组件 await emit 即可等待并获取结果。

emit 与 promise 结合怎么写？实现“子组件触发-父组件处理-子组件得知结果”

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)
  }
}