vue中如何实现子组件相互切换,而且数据不会丢失

项目场景：

今天的项目场景: 项目为数据报表,但是一个父页面中有很多的子页面,而且子页面中不是相互关联,但是数据又有联系.

---

问题描述

 子页面相互切换的时候之前填写好的数据会丢失,无法保存.这样想提交所有的子页面的数据就出现问题.

---

原因分析：

分析原因就是子组件在切换的时候,我使用的是动态组件,这个动态组件的底层原理是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-tag
              v-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-alive
  2, 为了提高性能或者简化代码,可以使用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>

完美解决问题!