欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談父子組件傳值問(wèn)題

 更新時(shí)間:2023年04月07日 14:16:28   作者:右眸Remnant  
這篇文章主要介紹了Vue父子組件傳值問(wèn)題,文章中有詳細(xì)的示例代碼,感興趣的同學(xué)可以參考閱讀

一、問(wèn)題描述

想要搭建一個(gè)模型檢驗(yàn)的頁(yè)面,在點(diǎn)擊按鈕“開(kāi)始檢測(cè)”后,后端會(huì)獲取相應(yīng)數(shù)據(jù)、頁(yè)面跳轉(zhuǎn)并進(jìn)行渲染。

主要涉及三個(gè)頁(yè)面:index.vue、BorderCard.vue、CardResult.vue,如圖1:

在這里插入圖片描述

index.vue想要引入“步驟條”實(shí)現(xiàn)兩個(gè)組件的切換效果,如圖2:

在這里插入圖片描述

index.vue中引入兩個(gè)組件的部分:

<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">立即檢測(cè)</el-button>
</template>
<script>
methods: {
	next() {
	  /** 點(diǎn)擊立即檢測(cè)按鈕后,發(fā)送請(qǐng)求從后端獲取數(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('模型訓(xùn)練異常')
      })
    },
}
</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('模型訓(xùn)練異常')
      }
      // 數(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
    }
  }

單獨(dú)呈現(xiàn) CardResult.vue組件如圖

在這里插入圖片描述

當(dāng)組件切換后,下面數(shù)據(jù)報(bào)告正常顯示,但是圖像發(fā)生了變形:

在這里插入圖片描述

二、問(wèn)題解決

查閱相關(guān)文章,其中原因包括:

  • 采用v-show控制切換時(shí),v-show為false時(shí),echarts圖并不能獲取外部容器的正常寬高,所以展示出來(lái)的圖形會(huì)以其自身默認(rèn)的大小展示;解決方法-> 在切換到圖時(shí)重新調(diào)用圖組件

根據(jù)上面說(shuō)法,我理解的是切換組件的時(shí)候重新進(jìn)行加載,相關(guān)博客建議使用組件 :key 屬性,當(dāng)發(fā)生變化后會(huì)重新加載組件,代碼如下:

<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)問(wèn)題:Vue刷新后頁(yè)面數(shù)據(jù)丟失問(wèn)題的解決過(guò)程
解決方案:使用 SessionStorage 進(jìn)行處理。
相關(guān)部分代碼如下:

// index.vue
<script>
methods: {
    handleNextTabs(data) {
      console.log('recall=>', data);
      if (!data) {
        this.$message.error('模型訓(xùn)練異常')
      }
      this.show_info.total = data.data_total
      this.modelReport = data
      // 將數(shù)據(jù)存儲(chǔ)到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ā)生下列錯(cuò)誤,如圖:

在這里插入圖片描述

為了避免直接改變prop中的值,因此我考慮繼續(xù)使用 this.$emit -> index.vue,由于此時(shí)組件沒(méi)有發(fā)生切換,因此不會(huì)觸發(fā)組件的重新加載,然后實(shí)現(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>

運(yùn)行結(jié)果如圖,目前能夠正常顯示:
在這里插入圖片描述

到此這篇關(guān)于淺談父子組件傳值問(wèn)題的文章就介紹到這了,更多相關(guān)父子組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性

    vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性

    這篇文章主要為大家介紹了vue響應(yīng)式Object代理對(duì)象的修改和刪除屬性示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • Vue組件開(kāi)發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能

    Vue組件開(kāi)發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能

    Vue是目前使用較廣泛的三大前端框架之一,其數(shù)據(jù)驅(qū)動(dòng)及組件化的特性使得前端開(kāi)發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗(yàn)碼官方文檔 基礎(chǔ)上,從封裝需要出發(fā)開(kāi)發(fā)一個(gè)簡(jiǎn)單的短信圖形驗(yàn)證Vue組件,具體內(nèi)容詳情大家參考下本文
    2017-11-11
  • vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕

    vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可移動(dòng)的懸浮按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • 解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類(lèi)型聲明

    解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類(lèi)型聲明

    這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類(lèi)型聲明的相關(guān)資料,這個(gè)錯(cuò)誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類(lèi)型聲明文件,需要的朋友可以參考下
    2023-07-07
  • Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作

    Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作

    這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • Vue.js通過(guò)組件處理Icon圖標(biāo)

    Vue.js通過(guò)組件處理Icon圖標(biāo)

    這篇文章介紹了Vue.js通過(guò)組件處理Icon圖標(biāo)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • 使用 Vue.js 仿百度搜索框的實(shí)例代碼

    使用 Vue.js 仿百度搜索框的實(shí)例代碼

    本篇文章主要介紹了使用 Vue.js 仿百度搜索框的實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決

    vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決

    這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度

    vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度

    這篇文章主要介紹了vue中如何動(dòng)態(tài)獲取剩余區(qū)域的滾動(dòng)高度問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • vue實(shí)現(xiàn)帶縮略圖的輪播圖效果

    vue實(shí)現(xiàn)帶縮略圖的輪播圖效果

    這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的可以參考下
    2024-02-02

最新評(píng)論