Vue——父子组件间异步动态获取数据传递数据时,子组件获取不到值或者延时获取

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值