javascript - vue渲染子组件异步问题
本文介绍了javascript - vue渲染子组件异步问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
现在有一个组件A。里面包含了组件B,C,D,由于涉及了数据共享,组件B需要用x参数发请求,但是x参数是在A里面发请求获取到的,现在出现的问题是在A还没获取到参数x的时候B就已经先一步发请求了(结果请求400错误),出现问题的根本问题是父组件与子组件的渲染都是异步进行的,在父组件获取参数时用了async+await。
async beforeMount(){
let x = await this.getCityInfo();
this.GET_POSITION(x);
console.log(11);
},
现在目前能想到的方案就将B,C,D全部整合到A内部,使A内部没有子组件,这样就不会有组件之间异步渲染的问题,请问还有其他更好的方案吗?
解决方案
获取 x
成功之前不渲染 B
<B v-if="x"></B>
或者 B
自己 watch prop x
,值不对不发请求。
watch: {
x (value) {
if (value) {
// send request
}
}
}
这篇关于javascript - vue渲染子组件异步问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文