vue生命周期异步请求问题?

作者站长头像
站长
· 阅读数 17

vue中,假如子组件在created发送了一个异步请求,父组件在mouted内发送一个异步请求,如何保证父组件在异步请求后能够拿到子组件异步数据。也就是说我希望在子组件和父组件异步都结束后拿到两者的值做一些操作,请问这个有什么比较好的办法嘛。

回复
1个回答
avatar
test
2024-06-29

可以考虑将子组件中的异步方法改造为由父组件来调用,示例如下:

// 子组件
export default {
  created() {
    // 不在子组件的created中调用
  },
  methods: {
    // 子组件的异步方法
    async someChildMethod() {
      // 执行一些异步操作
      await asyncMethod();
    }
  }
};
<!-- 父组件 -->
<template>
  <child ref="child"></child>
</template>
// 父组件
export default {
  async mounted() {
    // 在父组件的mounted中通过Promise.all调用父组件及子组件的异步方法
    await Promise.all([
      this.someParentMethod(),
      this.$refs.child.someChildMethod()
    ]);

    // 现在父子组件中的异步方法都已执行完成
    // Todo ...
  },
  methods: {
    // 父组件的异步方法
    async someParentMethod() {
      // 执行一些异步操作
      await asyncMethod();
    }
  }
};
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容