问题描述:
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
},