项目场景：
今天的项目场景: 项目为数据报表,但是一个父页面中有很多的子页面,而且子页面中不是相互关联,但是数据又有联系.
问题描述
子页面相互切换的时候之前填写好的数据会丢失,无法保存.这样想提交所有的子页面的数据就出现问题.
原因分析：
分析原因就是子组件在切换的时候,我使用的是动态组件,这个动态组件的底层原理是v-if去判断,这样子组件就有一个消失重建的过程. 如何让子组件保存不消失.而且还需要在切换回来的时候其他子页面的数据改了之后,当前的子页面的数据也会同步?
解决方案：
vue中有一个延缓什么周期的组件,keep-alive
将子组件用keep-alive包裹之后
<keep-alive><component :is="'tab' + active" :ref="'tab' + active"></component></keep-alive>整体代码:
<template><div class="userbox"><comm-card><!-- title 标题 v-bind : v-on @ v-slot # --><template #title><div class="box"><span>有子组件-案例2</span></div></template><!-- content 正文--><template #content><div style="width: 100%"><div class="tabtitle" style="margin-bottom: 20px"><el-tagv-for="tag in tags":key="tag.name"closable:type="tag.type"style="margin-left: 20px; width: 100px; text-align: center"@click="tabclicks(tag.id)">{{ tag.name }}</el-tag></div><div class="tabbox"><keep-alive><component :is="'tab' + active" :ref="'tab' + active"></component></keep-alive></div><div><el-button type="primary" @click="save()">提交</el-button></div></div></template></comm-card></div>
</template><script>
/*1, 不能让子组件在切换的时候,值消失,必须使用缓存技术, v-show 或者 keep-alive2, 为了提高性能或者简化代码,可以使用component 动态组件加载技术3, 使用ref技术获取子组件的值4, 结合tab栏点击事件,实现获取值的时机
*/
// 第一步 引入
import commCard from "../../components/commonCard";
import tab1 from "./components/sun1.vue";
import tab2 from "./components/sun2.vue";
import tab3 from "./components/sun3.vue";
// 第二步 注册到我们的components中
export default {components: {commCard,tab1,tab2,tab3,},data() {return {active: 1,tags: [{ id: 1, name: "菜单1", type: "" },{ id: 2, name: "菜单2", type: "success" },{ id: 3, name: "菜单3", type: "warning" },],values: {}, // 存不同的子组件的值};},methods: {tabclicks(value) {//在点击的时候开始存入上一个子组件的值this.values[this.active - 1] = this.$refs["tab" + this.active].obj;// 切换到已经点击的子组件上this.active =this.tags.findIndex((ele) => {return ele.id == value;}) + 1;},save() {//解决方案,将不同组件的值用不懂对象名称包裹// 获取当前子组件的值this.values[this.active - 1] = this.$refs["tab" + this.active].obj;// 打印所以得子组件的值console.log(this.values);},},
};
</script><style lang="less" scoped>
.box {display: flex;justify-content: space-between;align-items: center;width: 100%;
}
</style>
完美解决问题!
