淺談父子組件傳值問題
一、問題描述
想要搭建一個模型檢驗的頁面,在點擊按鈕“開始檢測”后,后端會獲取相應(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-08Vue組件開發(fā)之LeanCloud帶圖形校驗碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一,其數(shù)據(jù)驅(qū)動及組件化的特性使得前端開發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗碼官方文檔 基礎(chǔ)上,從封裝需要出發(fā)開發(fā)一個簡單的短信圖形驗證Vue組件,具體內(nèi)容詳情大家參考下本文2017-11-11Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09