vue中父子組件傳值,解決鉤子函數(shù)mounted只運(yùn)行一次的操作
因?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ò)誤對象、錯(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:{ //用來注冊子組件的節(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ǔ)充知識：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)行一次的操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例
本文主要介紹了vue調(diào)用谷歌授權(quán)登錄獲取用戶通訊錄的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)
本文通過示例代碼介紹了vue3 開始時(shí)間與結(jié)束時(shí)間比較驗(yàn)證(結(jié)束時(shí)間需要大于開始時(shí)間)的相關(guān)操作,代碼簡單易懂,感興趣的朋友跟隨小編一起看看吧2024-07-07
大家在寫系統(tǒng)的時(shí)候,會(huì)有這樣的需求：點(diǎn)擊修改后把需要修改的數(shù)據(jù)放入表單,其中會(huì)有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無法選中問題,感興趣的朋友一起看看吧2024-03-03
Vue+FormData+axios實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用FormData和axios實(shí)現(xiàn)圖片上傳功能，本文為大家整理了詳細(xì)步驟，感興趣的小伙伴可以了解一下2023-08-08
Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式
這篇文章主要介紹了Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
這篇文章主要為大家介紹了Vite的createServer啟動(dòng)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
本文介紹Vue組件間通信方式，Vue組件間通信一直是個(gè)重要的話題，雖然官方推出的Vuex狀態(tài)管理方案可以很好的解決組件之間的通信問題，但是在組件庫內(nèi)部使用Vuex往往會(huì)比較重，本文將系統(tǒng)的羅列出幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2022-09-09
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家介紹了詳解vue3中如何使用youtube-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09