淺談父子組件傳值問題

更新時間：2023年04月07日 14:16:28 作者：右眸Remnant

這篇文章主要介紹了Vue父子組件傳值問題，文章中有詳細的示例代碼，感興趣的同學可以參考閱讀

一、問題描述

想要搭建一個模型檢驗的頁面，在點擊按鈕“開始檢測”后，后端會獲取相應數(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é)果如圖，目前能夠正常顯示：
在這里插入圖片描述