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

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

beforCreate（创建之前）

Created（创建之后）

beforMount（载入之前）

Mounted（载入之后）

beforUpdate（更新之前）

Updated（更新之后）

beforDestroy（销毁之前）

Destroyed（销毁之后）

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

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

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

父组件向

子组件传值

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

父组件 ：conponent.vue

子组件：iconponent.vue

父组件

<template> <div> <span>父组件</span> <icomponent-box :id='this.id'></icomponent-box> </div></template><script>//导入子组件import icomponent from ’./icomponent.vue’;export default { data () { return { id:12 } }, components:{ //用来注册子组件的节点 'icomponent-box': icomponent }}</script><style></style>

子组件

<template> <div>子组件</div></template><script>export default { updated:{ this.getComponents(); }, mounted:{ this.getComponents(); }, data () { return { } }, methods:{ getComponents(){ this.$http.get('api/getcomponents/' + this.id); } }, props: ['id'] //接收父组件传递过来的id值}</script>

补充知识：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只运行一次的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。