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

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

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

回复
1个回答
avatar
test
2024-07-13
方法不止这一种,这只是提供的其中一种思路,根据场景需进行优化
<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()
    })
  })
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容