Vue 的 emit 本身不返回值,需通过回调函数或 Promise 机制获取父组件处理结果:回调方式由子组件传函数、父组件执行后传参回;Promise 方式则由子组件 await 父组件调用 resolve。

emit 本身不返回值,但可以通过回调函数或 Promise 机制拿到父组件处理完成的状态。Vue 的 emit 是纯通知行为,同步触发、无返回,所以不能像调用函数那样直接接收 return 值。要获取“父组件处理完”的反馈,关键在于让父组件在做完逻辑后主动通知子组件——常用且可靠的方式就两种。
用回调函数接收处理结果(最常用)
子组件 emit 时传一个函数,父组件在事件处理中执行它,并把结果作为参数传回。
- 子组件写法:
<script setup><br> const emit = defineEmits(['submit']);<br> const handleSubmit = () => {<br> emit('submit', (result) => {<br> console.log('父组件返回:', result); // 如 { success: true, data: ... }<br> });<br> };<br> </script> - 父组件写法:
<script setup><br> const onSubmit = (callback) => {<br> // 模拟异步请求<br> fetch('/api/save').then(res => res.json()).then(data => {<br> callback({ success: true, data });<br> }).catch(err => {<br> callback({ success: false, error: err.message });<br> });<br> };<br> </script>
让父组件返回 Promise(适合需要 await 的场景)
如果子组件逻辑必须等待父组件完成(比如表单提交后跳转),可以把父组件的处理包装成 Promise,再由子组件 await。
- 子组件:
const handleSubmit = async () => {
const promise = new Promise(resolve => emit('submit', resolve));
await promise;
console.log('已确认父组件处理完毕');
}; - 父组件:
const onSubmit = (resolve) => {
api.save().then(() => resolve()).catch(err => resolve({ error: err }));
};
注意:这里 resolve 是子组件传来的,不是 Promise 构造器原生的 resolve,所以父组件不 new Promise,而是直接调用它。
不推荐但偶见的替代方案:props 传函数
把父组件的方法以函数形式通过 props 传给子组件,子组件直接调用并 await 其返回值。
- 父组件:
- 子组件:
const props = defineProps({
onSubmit: { type: Function, required: true }
});
const doSubmit = async () => {
const result = await props.onSubmit(); // 直接得到返回值
console.log(result);
}; - 优点是语义清晰;缺点是破坏了事件解耦原则,父子组件耦合变高,测试和复用性下降。
实际开发中,回调方式兼容性好、逻辑明确,Promise 方式更契合组合式 API 的异步习惯。选哪种取决于你是否需要在子组件中阻塞后续执行——需要就用 Promise,只需简单通知就用回调。











