父子组件传值时,父组件从接口获取数据,通过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('我接收到了!');
			//执行。。。。。。
		}
	}
}
Logo

前往低代码交流专区

更多推荐