Vue主页面异步加载列表数据传值给子组件踩坑过程

主要需求是主页面向后台异步获取列表数据，然后传给子组件显示，由于是异步加载的原因，子组件先渲染，导致子组件无法获取数据，在使用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对象，然后再传到子组件即可。