因為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只運行一次的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。