因?yàn)閙ounted函數(shù)只會(huì)在html和模板渲染之后會(huì)加載一次，但是在子組件中只有第一次的數(shù)據(jù)顯示是正常的，所以需要再增加一個(gè)updated函數(shù)，在更新之后就可以重新進(jìn)行取值加載，完成數(shù)據(jù)的正常顯示。

beforCreate（創(chuàng)建之前）

Created（創(chuàng)建之后）

beforMount（載入之前）

Mounted（載入之后）

beforUpdate（更新之前）

Updated（更新之后）

beforDestroy（銷毀之前）

Destroyed（銷毀之后）

activate（keep-alive組件激活時(shí)調(diào)用）

deactivated（keep-alive組件停用時(shí)調(diào)用）

errorCaptured（這個(gè)組件的作用是接受子孫組件報(bào)錯(cuò)是調(diào)用，三個(gè)參數(shù) 錯(cuò)誤對(duì)象、錯(cuò)誤的組件、錯(cuò)誤信息）

父組件向

子組件傳值

通過父組件傳值調(diào)用子組件顯示不同的數(shù)據(jù)

父組件 ：conponent.vue

子組件：iconponent.vue

父組件

<template> <div> <span>父組件</span> <icomponent-box :id='this.id'></icomponent-box> </div></template><script>//導(dǎo)入子組件import icomponent from ’./icomponent.vue’;export default { data () { return { id:12 } }, components:{ //用來注冊(cè)子組件的節(jié)點(diǎn) '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>

補(bǔ)充知識(shí)：Vue父子組件傳值，子組件數(shù)據(jù)只更新一次，之后更改父組件的數(shù)據(jù)，子組件不再更新

我就廢話不多說了，大家還是直接看代碼吧~

props:{ reportInfo:{ type:Object, default:()=>{} }},data:function(){return {cityName :’ ’,reportId :’ ’ ,}}mounted:function () { var _this = this; //初始化獲得數(shù)據(jù)，之后在watch中監(jiān)聽更新 _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中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。