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

父子组件传值时,父组件从接口获取数据,通过props传递给子组件。实际情况下:父组件获取数据有时间延迟,传递的props值为空,子组件接收的数据为props默认值

父子组件生命周期
父组件异步请求数据传递给子组件
父子组件接收数据有延迟

父子组件生命周期对比

一、加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

二、子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

三、父组件更新过程

父beforeUpdate->父updated

四、销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

这种情况可以给子组件设置延时加载,判断父组件传递的值,是否为空,为空则不渲染子组件,否则执行相应方法;

//父组件:
 
 method:{
 	getArticle(typeId){
 		this.$axios.get('article?' + typeId)
 			.then( res => {
 				this.comments= res.data.comments;
 			})
 			.catch(error =>{
 			})
 	}
}
//子组件
   
props:{ comments:{ type:Array, default:[] } }, watch:{ comments(newVal,oldVal){ if(newVal){ console.log('我接收到了!'); //执行。。。。。。 } } }

你可能感兴趣的:(学习笔记,vue)