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

因为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只运行一次的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。