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 + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼
這篇文章主要介紹了Vue + Scss 動(dòng)態(tài)切換主題顏色實(shí)現(xiàn)換膚的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了iphone劉海屏頁面適配方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點(diǎn)討論?git?提交規(guī)范,結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
這篇文章主要介紹了Vue的props父傳子的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue.JS實(shí)現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件
這篇文章主要介紹了Vue.JS實(shí)現(xiàn)垂直方向展開、收縮不定高度模塊的JS組件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
element-ui修改el-form-item樣式的詳細(xì)示例
在使用element-ui組件庫的時(shí)候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vue.js下引入百度地圖jsApi的兩種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
TagsInput 是一種可編輯的輸入框，通過回車或者分號來分割每個(gè)標(biāo)簽，用回退鍵刪除上一個(gè)標(biāo)簽。這篇文章主要介紹了vue組件TagsInput的相關(guān)知識,需要的朋友可以參考下2020-05-05
Vue頁面內(nèi)公共的多類型附件圖片上傳區(qū)域并適用折疊面板(示例代碼)
本文中實(shí)現(xiàn)的附件上傳區(qū)域支持超多類型附件分類型上傳，并且可根據(jù)特定條件具體展示某些類型的附件上傳，本文給大家分享Vue頁面內(nèi)公共的多類型附件圖片上傳區(qū)域并適用折疊面板的示例代碼，需要的朋友參考下吧2021-12-12