快捷導(dǎo)航

vue中實(shí)現(xiàn)子組件相互切換且數(shù)據(jù)不丟失的策略詳解

更新時(shí)間：2024年03月22日 10:03:34 作者：月下星辰

項(xiàng)目為數(shù)據(jù)報(bào)表,但是一個(gè)父頁面中有很多的子頁面,而且子頁面中不是相互關(guān)聯(lián),但是數(shù)據(jù)又有聯(lián)系,所以本文給大家介紹了vue中如何實(shí)現(xiàn)子組件相互切換,而且數(shù)據(jù)不會丟失,并有詳細(xì)的代碼供大家參考,需要的朋友可以參考下

項(xiàng)目場景：

今天的項(xiàng)目場景: 項(xiàng)目為數(shù)據(jù)報(bào)表,但是一個(gè)父頁面中有很多的子頁面,而且子頁面中不是相互關(guān)聯(lián),但是數(shù)據(jù)又有聯(lián)系.

問題描述

子頁面相互切換的時(shí)候之前填寫好的數(shù)據(jù)會丟失,無法保存.這樣想提交所有的子頁面的數(shù)據(jù)就出現(xiàn)問題.

原因分析：

分析原因就是子組件在切換的時(shí)候,我使用的是動態(tài)組件,這個(gè)動態(tài)組件的底層原理是v-if去判斷,這樣子組件就有一個(gè)消失重建的過程. 如何讓子組件保存不消失.而且還需要在切換回來的時(shí)候其他子頁面的數(shù)據(jù)改了之后,當(dāng)前的子頁面的數(shù)據(jù)也會同步?

解決方案：

vue中有一個(gè)延緩什么周期的組件,keep-alive

將子組件用keep-alive包裹之后

  <keep-alive>
              <component :is="'tab' + active" :ref="'tab' + active"></component>
  </keep-alive>

整體代碼:

<template>
  <div class="userbox">
    <comm-card>
      <!-- title 標(biāo)題  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, 不能讓子組件在切換的時(shí)候,值消失,必須使用緩存技術(shù), v-show 或者 keep-alive
  2, 為了提高性能或者簡化代碼,可以使用component 動態(tài)組件加載技術(shù)
  3, 使用ref技術(shù)獲取子組件的值
  4, 結(jié)合tab欄點(diǎn)擊事件,實(shí)現(xiàn)獲取值的時(shí)機(jī)
*/
// 第一步 引入
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) {
      //在點(diǎn)擊的時(shí)候開始存入上一個(gè)子組件的值
      this.values[this.active - 1] = this.$refs["tab" + this.active].obj;
      // 切換到已經(jīng)點(diǎn)擊的子組件上
      this.active =
        this.tags.findIndex((ele) => {
          return ele.id == value;
        }) + 1;
    },
    save() {
      //解決方案,將不同組件的值用不懂對象名稱包裹
      // 獲取當(dāng)前子組件的值
      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>

完美解決問題!

番外：component實(shí)現(xiàn)組件切換

1.代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>組件切換</title>
</head>

<body>
    <div class="body">
        <input type="button" value="登錄" @click="name='login'">
        <input type="button" value="注冊" @click="name='register'">
        <input type="button" value="首頁" @click="name='index'">
        
        <!-- 使用 component 元素實(shí)現(xiàn)組件之間的切換 -->
        <component :is="name"></component>
    </div>


    <!-- 登錄組件 -->
    <template id="login">
        <h3>我是登錄組件</h3>
    </template>

    <!-- 注冊組件 -->
    <template id="register">
        <h3>我是注冊組件</h3>
    </template>

    <!-- 首頁組件 -->
    <template id="index">
        <h3>我是首頁組件</h3>
    </template>


    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        /* 登錄組件 */
        Vue.component("login", {
            template: "#login"
        })
        /* 注冊組件 */
        Vue.component("register", {
            template: "#register"
        })
        /* 首頁組件 */
        Vue.component('index', {
            template: "#index"
        })

        let vm = new Vue({
            el: ".body",
            data: {
                name:'login'
            }
        })
    </script>
</body>

</html>

效果：