浅谈父子组件传值问题

<border-card v-show="active === 0" :tab-index="active"/>
<card-result v-show="active === 1" />

// BorderCard.vue
<template>
<el-button style="position: absolute;top:-48px;right:20px;z-index: 999999;" @click="next">立即检测</el-button>
</template>
<script>
methods: {
	next() {
	  /** 点击立即检测按钮后，发送请求从后端获取数据(图表模型的正确率，数据信息等)，然后利用 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('模型训练异常')
      }
      // 数据解析
      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
    }
  }

<border-card v-show="active === 0" :key="active" :tab-index="active" @next="handleNextTabs" />
<card-result v-show="active === 1" :key="!active" :model-report="modelReport" />

// 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
      // 将数据存储到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') // 获取数据直接更新
    }
  },
  beforeDestroy() {
    // 毁灭前先移除掉，否则我跳转到其它地方，sessionStorage里面依旧存在着
    console.log('CardResult beforeDestroy...');
    sessionStorage.removeItem('modelReport')
  }
}
</script>

// CardResult.vue
<script>
created() {
    console.log('CardResult created...');
    if (sessionStorage.getItem('modelReport')) {
      this.$emit('refreshData', JSON.parse(sessionStorage.getItem('modelReport')))
    }
  },
  beforeDestroy() {
    // 毁灭前先移除掉，否则我跳转到其它地方，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>