emit实现子组件同步调用父组件异步函数

vue学习, 遇到的问题集合 本文总阅读量次

在子组件中用emit实现父组件中async-await的效果

问题描述

  • 假设父组件中有两个异步函数a、b，希望在子组件中实现等父组件的异步函数a执行完以后再执行父组件的异步函数b
  • 在父组件中直接使用async-await即可顺序执行异步函数a、b，而子组件中要实现这样的效果就可以借助emit的参数3来实现

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 父组件：给子组件添加事件 @a="a" @b="b"
// callback执行的就是emit参数3这个函数
async a(子组件传给a的参数, callback){
    await ...
    // a执行结束了
    callback(传给子组件emit参数3的值)
}
async b(子组件传给b的参数){
...
}

// 子组件
this.$emit("a", 传给a的参数, (父组件a传过来的值) => {
  this.$emit("b", 传给b的参数)
})

解决方法

  • 可借助emit的参数3来实现
vue学习, 遇到的问题集合