淺談父子組件傳值問題
更新時間：2023年04月07日 14:16:28 作者：右眸Remnant
這篇文章主要介紹了Vue父子組件傳值問題，文章中有詳細的示例代碼，感興趣的同學可以參考閱讀
一、問題描述
想要搭建一個模型檢驗的頁面，在點擊按鈕“開始檢測”后，后端會獲取相應(yīng)數(shù)據(jù)、頁面跳轉(zhuǎn)并進行渲染。
主要涉及三個頁面：index.vue、BorderCard.vue、CardResult.vue，如圖1：
index.vue想要引入“步驟條”實現(xiàn)兩個組件的切換效果，如圖2：
index.vue中引入兩個組件的部分：
<border-card v-show="active === 0" :tab-index="active"/> <card-result v-show="active === 1" />
相關(guān)部分代碼如下：
// BorderCard.vue
<template>
<el-button style="position: absolute;top:-48px;right:20px;z-index: 999999;" @click="next">立即檢測</el-button>
</template>
<script>
methods: {
next() {
/** 點擊立即檢測按鈕后，發(fā)送請求從后端獲取數(shù)據(jù)(圖表模型的正確率，數(shù)據(jù)信息等)，然后利用 this.$emit -> 父組件 -> CardResult.vue
*/
console.log('handleModelTrain....');
this.$http.post('').then(res => {
console.log('handleModelTrain=>', res);
this.$emit('next', res.data.data)
}).catch(() => {
this.$message.error('模型訓練異常')
})
},
}
</script>
// index.vue
<template>
<border-card v-show="active === 0" :tab-index="active" @next="handleNextTabs" />
<card-result v-show="active === 1" :model-report="modelReport" />
</template>
<script>
methods: {
handleNextTabs(data) {
console.log('recall=>', data);
if (!data) {
this.$message.error('模型訓練異常')
}
// 數(shù)據(jù)解析
this.show_info.total = data.data_total
this.modelReport = data
if (this.active++ > 1) this.active = 0;
},
}
// CardResult.vue
<script>
props: {
modelReport: {
type: Object,
default: () => {
return {
score: 0,
report: ''
}
}
}
},
watch: {
modelReport: {
handler: function(newVal, oldVal) {
console.log('watch modelReport=>', newVal, oldVal);
// 更新圖表
this.getEchartDataInit(false)
// 更新表格
this.getTableDataForReport(newVal)
},
deep: true
}
}
單獨呈現(xiàn) CardResult.vue組件如圖
當組件切換后，下面數(shù)據(jù)報告正常顯示，但是圖像發(fā)生了變形：
二、問題解決
查閱相關(guān)文章，其中原因包括：
- 采用v-show控制切換時，v-show為false時，echarts圖并不能獲取外部容器的正常寬高，所以展示出來的圖形會以其自身默認的大小展示；解決方法-> 在切換到圖時重新調(diào)用圖組件
根據(jù)上面說法，我理解的是切換組件的時候重新進行加載，相關(guān)博客建議使用組件 :key 屬性，當發(fā)生變化后會重新加載組件，代碼如下：
<border-card v-show="active === 0" :key="active" :tab-index="active" @next="handleNextTabs" /> <card-result v-show="active === 1" :key="!active" :model-report="modelReport" />
更改后的效果如圖：
此處組件傳值失效的具體原因不清楚。是否和組件傳值先被props接受，然后發(fā)生了組件重新加載有關(guān)
因此查找相關(guān)問題：Vue刷新后頁面數(shù)據(jù)丟失問題的解決過程
解決方案：使用 SessionStorage 進行處理。
相關(guān)部分代碼如下：
// index.vue
<script>
methods: {
handleNextTabs(data) {
console.log('recall=>', data);
if (!data) {
this.$message.error('模型訓練異常')
}
this.show_info.total = data.data_total
this.modelReport = data
// 將數(shù)據(jù)存儲到sessionStorage
sessionStorage.setItem('modelReport', JSON.stringify(this.modelReport))
if (this.active++ > 1) this.active = 0;
}
}
</script>
// CardResult.vue
<script>
created() {
console.log('CardResult created...');
if (sessionStorage.getItem('modelReport')) {
this.modelReport = sessionStorage.getItem('modelReport') // 獲取數(shù)據(jù)直接更新
}
},
beforeDestroy() {
// 毀滅前先移除掉，否則我跳轉(zhuǎn)到其它地方，sessionStorage里面依舊存在著
console.log('CardResult beforeDestroy...');
sessionStorage.removeItem('modelReport')
}
}
</script>
然而發(fā)生下列錯誤，如圖：
為了避免直接改變prop中的值，因此我考慮繼續(xù)使用 this.$emit -> index.vue，由于此時組件沒有發(fā)生切換，因此不會觸發(fā)組件的重新加載，然后實現(xiàn)賦值
修改后，部分相關(guān)代碼如下：
// CardResult.vue
<script>
created() {
console.log('CardResult created...');
if (sessionStorage.getItem('modelReport')) {
this.$emit('refreshData', JSON.parse(sessionStorage.getItem('modelReport')))
}
},
beforeDestroy() {
// 毀滅前先移除掉，否則我跳轉(zhuǎn)到其它地方，sessionStorage里面依舊存在著
console.log('CardResult beforeDestroy...');
sessionStorage.removeItem('modelReport')
}
}
</script>
<template>
<border-card v-show="active === 0" :key="active" :tab-index="active" @next="handleNextTabs" />
<card-result v-show="active === 1" :key="!active" :model-report="modelReport" @refreshData="refreshDataParent" />
</template>
<script>
methods: {
refreshDataParent(val) {
console.log('refreshDataParent recall...');
this.modelReport = val
}
}
</script>
運行結(jié)果如圖，目前能夠正常顯示：
到此這篇關(guān)于淺談父子組件傳值問題的文章就介紹到這了,更多相關(guān)父子組件傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue響應(yīng)式Object代理對象的修改和刪除屬性
這篇文章主要為大家介紹了vue響應(yīng)式Object代理對象的修改和刪除屬性示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
Vue組件開發(fā)之LeanCloud帶圖形校驗碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動及組件化的特性使得前端開發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗碼官方文檔 基礎(chǔ)上，從封裝需要出發(fā)開發(fā)一個簡單的短信圖形驗證Vue組件,具體內(nèi)容詳情大家參考下本文2017-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)可移動的懸浮按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要給大家介紹了關(guān)于如何解決vue3報錯:找不到模塊或其相應(yīng)的類型聲明的相關(guān)資料,這個錯誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類型聲明文件,需要的朋友可以參考下2023-07-07
Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章介紹了Vue.js通過組件處理Icon圖標的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
本篇文章主要介紹了使用 Vue.js 仿百度搜索框的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue項目部署到非根目錄下的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue中如何動態(tài)獲取剩余區(qū)域的滾動高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的可以參考下2024-02-02