微客导航 » 文章资讯 » vue中父子组件传值,解决钩子函数mounted只运行一次的操作

vue中父子组件传值,解决钩子函数mounted只运行一次的操作

2023-07-19 19:56:04 299

因为mounted函数只会在html和模板渲染之后会加载一次，但是在子组件中只有第一次的数据显示是正常的，所以需要再增加一个updated函数，在更新之后就可以重新进行取值加载，完成数据的正常显示。

beforCreate（创建之前）

Created（创建之后）

beforMount（载入之前）

Mounted（载入之后）

beforUpdate（更新之前）

Updated（更新之后）

beforDestroy（销毁之前）

Destroyed（销毁之后）

activate（keep-alive组件激活时调用）

deactivated（keep-alive组件停用时调用）

errorCaptured（这个组件的作用是接受子孙组件报错是调用，三个参数错误对象、错误的组件、错误信息）

父组件向

子组件传值

通过父组件传值调用子组件显示不同的数据

父组件：conponent.vue

子组件：iconponent.vue

父组件

子组件

补充知识：Vue父子组件传值，子组件数据只更新一次，之后更改父组件的数据，子组件不再更新

我就废话不多说了，大家还是直接看代码吧~

props:{
reportInfo:{
type:Object,
default:()=>{}
}
},
data:function(){
	return{
		cityName:'',
		reportId:'',
	}
}
mounted:function(){
	var_this=this;
	
//初始化获得数据，之后在watch中监听更新
_this.cityName=_this.reportInfo.cityName;
_this.reportId=_this.reportInfo.reportId;
}，
watch:{
	reportInfo(newValue,oldValue){
		var_this=this;
_this.cityName=newValue.cityName;
_this.reportId=newValue.reportId;
	}
}

以上这篇vue中父子组件传值,解决钩子函数mounted只运行一次的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

vue中父子组件传值,解决钩子函数mounted只运行一次的操作

热门推荐

随机推荐