1.子组件发射事件,记得传入回调函数(关键)。
this.$emit("test","回调函数");
2.在父组件中接收子组件发射的事件。
<template>
<div>
<card @test="test" />
</div>
</template>
3.父组中发送网络请求,并在网路请求中调用子组件传递过来的回调函数(这边采用的事setTimeout来进行模拟的)。
// 父组件代码
test(count, callback) {
// 模拟网络请求
setTimeout(() => {
// 处理子组件传递的数据
count++;
// 将处理过后的数据传递到回调函数中
callback(count);
}, 1000);
},
4.子组件将会等待父组件中计时器完成后进行数据的打印。
// 子组件代码
async handleFn() {
await this.$emit("test", 1, (res) => {
// 一秒钟后打印父组件中的处理结果
console.log(res);
});
},
回调函数用途+1,祝各位天天开心,少掉头!