vue中,如何实现多个请求都执行完毕后才执行后续方法?
父组件内遍历生成了多个子组件,子组件内有一个请求方法,该方法在父组件内调用执行。如何让所有子组件的childFunc
方法都执行完毕后,才执行父元素内的nextFunc
?代码如下:
子组件
<script>
export default {
name: 'child-item',
props: {
itemData: {
type: Object,
required: true
}
},
methods: {
async childFunc () {
const result = await this.$request.postSomething(this.itemData)
console.log('子元素执行')
}
}
}
</script>
父组件
<template>
<div>
<child-item v-for="(item, index) in dataList" ref="childRef" :key="index" :itemData="item" />
<button @click="postAll">点击</button>
</div>
</template>
<script>
export default {
name: 'parent',
data () {
return {
dataList: [
{name: 'A', age: 1},
{name: 'B', age: 2},
{name: 'C', age: 3},
{name: 'D', age: 4},
{name: 'E', age: 5}
]
}
},
methods: {
// 执行完所有子元素内的任务后,才执行nextFunc
postAll () {
this.$refs.childRef.forEach(item => {
item.childFunc()
})
this.nextFunc()
},
nextFunc () {
console.log('后续函数已被执行')
},
}
}
</script>
回复
1个回答

test
2024-07-05
- 子组件内注册事件, 父组件进行监听并计数
count
, 子组件既然是遍历得到的就可以根据length计算出总共有多少接口, 并count
与接口总数做对比, 两者相等就意味着所有的子组件的发完毕了
上面的是根据你当前的情况的解决方法, 更好的我觉得是: 既然子组件是遍历得到的, 子组件的那就要都发相同的接口, 那不如将同一个接口在父组件发了, 既节省了性能又方便, 将数据在传给子组件渲染就行.
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容