vue多次调用子组件的异步方法怎么等待全部执行完毕

可以使用Promise.all()方法来等待多个异步操作完成后再进行下一步操作。

1. 在父组件中，首先定义一个数组来存放每次调用子组件的异步方法返回的Promise对象。

2. 每次调用子组件的异步方法时，将其返回的Promise对象加入到数组中。

3. 使用Promise.all()方法来等待所有异步操作的Promise对象都完成后再执行下一步操作。

示例代码：

<template>
  <div>
    <child v-for="(item, index) in list" :key="index" ref="child"></child>
    <button @click="handleClick">执行子组件的异步方法</button>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      list: [1, 2, 3],
      promises: []
    };
  },
  methods: {
    handleClick() {
      // 遍历子组件，调用异步方法并将Promise对象加入到数组中
      for (let i = 0; i < this.list.length; i++) {
        const promise = this.$refs.child[i].asyncMethod();
        this.promises.push(promise);
      }
      // 等待所有Promise对象完成后再执行下一步操作
      Promise.all(this.promises).then(() => {
        console.log('所有异步方法执行完毕');
        // TODO: 执行下一步操作
      });
    }
  }
}
</script>