父子组件传值时,父组件从接口获取数据,通过props传递给子组件。实际情况下:父组件获取数据有时间延迟,传递的props值为空,子组件接收的数据为props默认值
父子组件生命周期
父组件异步请求数据传递给子组件
父子组件接收数据有延迟
父子组件生命周期对比
一、加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
二、子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
三、父组件更新过程
父beforeUpdate->父updated
四、销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
这种情况可以给子组件设置延时加载,判断父组件传递的值,是否为空,为空则不渲染子组件,否则执行相应方法;
//父组件:
<daily-article :comments="comments"></daily-article>
method:{
getArticle(typeId){
this.$axios.get('article?' + typeId)
.then( res => {
this.comments= res.data.comments;
})
.catch(error =>{
})
}
}
//子组件
<div class="daily-comments" v-show="comments.length">
</div>
props:{
comments:{
type:Array,
default:[]
}
},
watch:{
comments(newVal,oldVal){
if(newVal.length>0){
console.log('我接收到了!');
//执行。。。。。。
}
}
}