vue父组件怎么控制多个子组件的请求顺序？

Question

同个页面下有几个子组件，需要做到控制逐步请求，就是有序的发起请求，等第一个子组件的请求回调后再发起第二个子组件的请求，以此类推，请教一下各位大佬这种情况在父组件中怎么控制，页面是需要渲染出来的，就是数据可以慢慢加载。

Answer 1

方法不止这一种，这只是提供的其中一种思路，根据场景需进行优化

<template>
<!-- 父组件 -->
  <div class="parent">
    <child-one ref="childOne"></child-one>
    <child-two ref="childTwo"></child-two>
    <child-three ref="childThree"></child-three>
  </div>
</template>

async initData () {
  await this.$refs.childOne.getChildOneData()
  await this.$refs.childTwo.getChildTwoData()
  await this.$refs.childThree.getChildThreeData()
}

// 子组件
getChildOneData () {
  return new Promise((res, rej) => {
    // setTimeout换成接口
    setTimeout(() => {
      res()
    })
  })
}

Answer 2

1.通过watch监听参数变化
第一个组件请求完后修改参数值
第二个组件监听值变化后发起请求
2.通过监听事件
第一个组件请求完后触发事件
父组件监听事件并调用第二个组件的方法