vue 父组件异步获取数据后给子组件赋值

问题描述：

vue 在父组件中获取异步数据后传给子组件，但是发现子组件在渲染的时候并没有数据，在created里面打印也是空的，结果发现一开始子组件绑定的数据是空的，在请求数据没有返回数据时，子组件就已经先加载了，所以导致子组件数据为空。

解决方法：

方法一

在引用组件的父组件页面使用 v-if 进行判断，当数据返回值后 进行子组件的渲染。

代码示例：

父组件

<selectDateTime ref="selectDateTime" :startRentTime='startRentTime' :createOrderLimit='createOrderLimit' v-if="startRentTime && createOrderLimit"></selectDateTime>

子组件

props:['startRentTime','createOrderLimit'],

弊端：

由于不确定数据的请求时间，如果等数据请求结束后再渲染组件，当请求时间过长时，可能会导致页面子组件所在位置有一段时间是空白的，用户体验较差。

方法二

在组件内使用watch监听从父级页面传来的值得变化

代码示例：

父组件

<selectDateTime ref="selectDateTime" :startRentTime='startRentTime' :createOrderLimit='createOrderLimit'></selectDateTime>

子组件

props:['startRentTime'],

 watch:{

            startRentTime:{
                handler(newval,oldval){
                    this.startRentTime = newval;
                    this.initialDate()
                    console.log(newval);
                    console.log(oldval)
                },
                deep: true
 },