vue動態組件的應用場景講解-以tab切換效果爲例

時間 2021-05-03

標籤 html vue 數組瀏覽器緩存 app less iview dom 佈局欄目 HTML 简体版

原文原文鏈接

問題描述

tab切換的場景在開發中會常常用到。當須要實現這種效果的時候，咱們經常會想到下面的方式去實現這個效果。html

方式一使用display:none;去控制dom元素的顯示與隱藏。從而實現，兩個tab的顯示與隱藏。不過若是有三四個tab要切換的話，這種方式就不可取了。
方式二使用vue中的指令v-if或者v-show實現。這種方式能夠實現，不過代碼寫的不優雅。試想一個.vue文件中出現一大把v-if是什麼樣的效果？並且使用v-if還得聲明不少的變量去作標識。因此不是十分好的的解決方案
方式三使用elementui或者iview中的tab切換組件這種方式也還行，不過有的時候須要/deep/改樣式，就有點麻煩了。

筆者認爲，使用vue的動態組件去實現tab的切換效果，會比較方便。vue

什麼是vue的動態組件

vue的動態組件，本質上仍是一個組件，組件通俗來講就是一塊具備js邏輯的UI視圖層。所謂動態組件就是咱們能夠根據一些條件去動態控制頁面的某個地方具體顯示那個組件。這樣說就有點tab切換的味道了。數組

應用場景描述

需求效果圖

其實很簡單，就是一個tab切換的效果，固然實際開發中，tab的樣式效果可能會稍微複雜點。瀏覽器

實現步驟

第一步（新建組件並引入註冊）

首先在components文件夾下定義四個.vue文件，做爲tab切換呈現的內容部分，引入既可以使用。
新建

引入並註冊緩存

import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";

components: {
    one,
    two,
    three,
    four,
  },

第二步（佈局，上面放tab點擊的標籤，下面放組件呈現對應內容）

<template>
  <div id="app">
    <div class="top">
     <!-- 放置tab點擊標籤 -->
    </div>
    <div class="bottom">
      <!-- 放置動態組件呈現對應內容 -->
    </div>
  </div>
</template>

第三步（寫好上面的tab點擊標籤）

// 首先咱們在data中定義數組cardArr存放點擊tab的數據
    data() {
        return {
          whichIndex: 0,
          cardArr: [
            {
              componentName: "動態組件一",
            },
            {
              componentName: "動態組件二",
            },
            {
              componentName: "動態組件三",
            },
            {
              componentName: "動態組件四",
            },
          ],
        };
      },
// 而後使用v-for循環出來呈現
    <template>
      <div id="app">
        <div class="top">
          <div
            class="crad"
            :class="{ highLight: whichIndex == index }"
            v-for="(item, index) in cardArr"
            :key="index"
            @click="whichIndex = index"
          >
            {{ item.componentName }}
          </div>
        </div>
        <div class="bottom">
          <!-- 放置動態組件... -->
        </div>
      </div>
    </template>
// 又由於須要有高亮狀態，因此初始咱們就默認讓索引爲0的也就是第一個高亮，使用data中定義的whichIndex和:class實現
    // 高亮樣式
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }

第四步（使用動態組件標籤 <component/> ）

// 動態組件標籤<component/>有一個is屬性，is的值爲誰，就能夠渲染誰，
    // 這裏咱們先用一個變量componentId存起來,componentId爲誰，就呈現誰
    <div class="bottom">
        <component :is="componentId"></component>
    </div>
    
    // 咱們默認就讓第一個第一個呈現吧，同時須要讓cardList中的組件名和組件id對應上，
    // 因此data中應該修改爲這樣
    data() {
        return {
          whichIndex: 0,
          componentId: "one", // 值就是咱們在components對象中註冊的引入的組件的名字
          cardArr: [
            {
              componentName: "動態組件一",
              componentId: "one", // 要與之對應
            },
            {
              componentName: "動態組件二",
              componentId: "two", // 要與之對應
            },
            {
              componentName: "動態組件三",
              componentId: "three", // 要與之對應
            },
            {
              componentName: "動態組件四",
              componentId: "four", // 要與之對應
            },
          ],
        };
      },

第五步（點擊某個tab組件，就動態更改對應componentId值便可）

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="
          whichIndex = index;
          componentId = item.componentId; 
        "
      >
          <!-- @click在標籤中能夠寫多個操做代碼，以分號隔開便可 -->
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
    <!-- keep-alive緩存組件，這樣的話，組件就不會被銷燬，DOM就不會被從新渲染，
    瀏覽器也就不會迴流和重繪，就能夠優化性能。不使用的話頁面加載就會慢一點 -->
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

完整代碼附上

<template>
  <div id="app">
    <div class="top">
      <div
        class="crad"
        :class="{ highLight: whichIndex == index }"
        v-for="(item, index) in cardArr"
        :key="index"
        @click="
          whichIndex = index;
          componentId = item.componentId;
        "
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import one from "./components/one";
import two from "./components/two";
import three from "./components/three";
import four from "./components/four";
export default {
  components: {
    one,
    two,
    three,
    four,
  },
  data() {
    return {
      whichIndex: 0,
      componentId: "one",
      cardArr: [
        {
          componentName: "動態組件一",
          componentId: "one",
        },
        {
          componentName: "動態組件二",
          componentId: "two",
        },
        {
          componentName: "動態組件三",
          componentId: "three",
        },
        {
          componentName: "動態組件四",
          componentId: "four",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 50px;
  .top {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    .crad {
      width: 20%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #e9e9e9;
    }
    .highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }
  }
  .bottom {
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 100px);
    border: 3px solid pink;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>