三明市建设局网站,网店代运营哪个好,优酷网站建设有何特点,西安最大的互联网公司文章目录前言一、问题描述二、问题解决前言
在写毕业设计#xff0c;涉及了一些前端Vue.js的组件传值知识并出现了相关问题#xff0c;因此进行记录。 问题 Vue.js的使用不熟练#xff0c;相关组件、props等掌握不清晰前端代码书写不规范 望指正#xff01; 一、问题描述 …
文章目录前言一、问题描述二、问题解决前言
在写毕业设计涉及了一些前端Vue.js的组件传值知识并出现了相关问题因此进行记录。 问题 Vue.js的使用不熟练相关组件、props等掌握不清晰前端代码书写不规范 望指正 一、问题描述
想要搭建一个模型检验的页面在点击按钮“开始检测”后后端会获取相应数据、页面跳转并进行渲染。 主要涉及三个页面index.vue、BorderCard.vue、CardResult.vue如图1 index.vue想要引入“步骤条”实现两个组件的切换效果如图2
index.vue中引入两个组件的部分
border-card v-showactive 0 :tab-indexactive/
card-result v-showactive 1 /相关部分代码如下
// BorderCard.vue
template
el-button styleposition: absolute;top:-48px;right:20px;z-index: 999999; clicknext立即检测/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-showactive 0 :tab-indexactive nexthandleNextTabs /
card-result v-showactive 1 :model-reportmodelReport /
/template
script
methods: {handleNextTabs(data) {console.log(recall, data);if (!data) {this.$message.error(模型训练异常)}// 数据解析this.show_info.total data.data_totalthis.modelReport dataif (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}}单独呈现 CardResult.vue组件如图 当组件切换后下面数据报告正常显示但是图像发生了变形
二、问题解决
查阅相关文章其中原因包括
采用v-show控制切换时v-show为false时echarts图并不能获取外部容器的正常宽高所以展示出来的图形会以其自身默认的大小展示解决方法- 在切换到图时重新调用图组件
根据上面说法我理解的是切换组件的时候重新进行加载相关博客建议使用组件 :key 属性当发生变化后会重新加载组件代码如下
border-card v-showactive 0 :keyactive :tab-indexactive nexthandleNextTabs /
card-result v-showactive 1 :key!active :model-reportmodelReport /更改后的效果如图 此处组件传值失效的具体原因不清楚。是否和组件传值先被props接受然后发生了组件重新加载有关
因此查找相关问题Vue刷新后页面数据丢失问题的解决过程 解决方案使用 SessionStorage 进行处理。 相关部分代码如下
// index.vue
script
methods: {handleNextTabs(data) {console.log(recall, data);if (!data) {this.$message.error(模型训练异常)}this.show_info.total data.data_totalthis.modelReport data// 将数据存储到sessionStoragesessionStorage.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然而发生下列错误如图 为了避免直接改变prop中的值因此我考虑继续使用 this.$emit - index.vue由于此时组件没有发生切换因此不会触发组件的重新加载然后实现赋值
修改后部分相关代码如下
// 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)}
}
/scripttemplateborder-card v-showactive 0 :keyactive :tab-indexactive nexthandleNextTabs /card-result v-showactive 1 :key!active :model-reportmodelReport refreshDatarefreshDataParent /
/template
script
methods: {refreshDataParent(val) {console.log(refreshDataParent recall...);this.modelReport val}
}
/script运行结果如图目前能够正常显示
