主要需求是主页面向后台异步获取列表数据,然后传给子组件显示,由于是异步加载的原因,子组件先渲染,导致子组件无法获取数据,在使用props传值时,绑定的数据有一定区别。
解决子组件异步加载的问题最简单的办法就是新增v-if判断
<bid-order :bidDatas="bidDatas" :type="type"/>
改成
<bid-order v-if="bidDatas" :bidDatas="bidDatas" :type="type"/>
但是在v-if判断true false 的时候,Array 和Object的判断上有些许差别。
<bid-order v-if="bidDatas" :bidDatas="bidDatas" :type="type"/>
<script>
export default {
name: 'test',
components: {
bidOrder
},
data() {
return {
bidDatas:[]
}
}
}
</script
v-if 在使用数组时是无法监控到数组发生的变化
<bid-order v-if="bidDatas.length" :bidDatas="bidDatas" :type="type"/>
使用length属性也是无法监控数组的长度变化。
故而要换一种思路,我们直接判断单个对象,换成对象后,子组件就可以在主页面获取完数据后再渲染了。
<bid-order v-if="bidData" :bidData="bidData" :type="type"/>
<script>
export default {
name: 'test',
components: {
bidOrder
},
data() {
return {
bidData:undefined
}
}
}
</script
我们可以考虑把异步的列表数据重新封装成单个js对象,然后再传到子组件即可。