vue利用回调函数保证子组件调父组件方法按顺序执行

温馨提示: 着急寻求解决方案的童鞋可直接看第2章

1. 前言

现有个需求，父组件的一个方法 funA()，在父组件调用也在子组件调用，且 funA() 中有接口请求，要知道接口请求是异步执行的，我想拿到请求的返回值来判断接下来进行哪一步骤。
首先我就想到了 await + promise 组合

// 该方法在父组件
funA(){
  return new Promise((resolve)=>{
    api(this.params).then((res)=>{
      resolve(res.data)
    })
  })
}

// 在父组件中调用
async funB(){
    let bol = await this.funA()
    if(bol){...}
}

但是当子组件也需要调用这个方法时，傻眼了...

// 该方法在子组件
async funC(){
    let bol = await this.$emit('funA', data)
    console.log(bol) // 是函数体，并不是promise的返回值
}

emit 没有返回值，用不了promise ！！

2. 解决方案

所以又换条路子，想把异步请求同步操作，除了 await 还有 回调函数 也可以实现。

// 该方法在父组件
funA(callback){
   api(this.params).then((res)=>{
      if (res.data){
        (callback && typeof(callback) === 'function') && callback();
      }
    })
}

// 在父组件中调用
async funB(){
    this.funA(()=>{
      ...
    })
}

// 该方法在子组件
async funC(){
    this.$emit('funA', ()=>{
      ...
    })
}

最后感谢文章 https://www.h5w3.com/36959.html

如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！