关于前端:vue动态组件的应用场景讲解以tab切换效果为例

问题形容

tab切换的场景在开发中会常常用到。当须要实现这种成果的时候，咱们经常会想到上面的形式去实现这个成果。

• 形式一 应用display:none;去管制dom元素的显示与暗藏。从而实现，两个tab的显示与暗藏。不过如果有三四个tab要切换的话，这种形式就不可取了。
• 形式二 应用vue中的指令v-if或者v-show实现。这种形式能够实现，不过代码写的不优雅。试想一个.vue文件中呈现一大把v-if是什么样的成果？而且应用v-if还得申明很多的变量去做标识。所以不是非常好的的解决方案
• 形式三 应用elementui或者iview中的tab切换组件 这种形式也还行，不过有的时候须要/deep/改款式，就有点麻烦了。

笔者认为，应用vue的动静组件去实现tab的切换成果，会比拟不便。

什么是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>

理论业务中，灵活运用动静组件，这样写进去的代码格调还是比拟优雅的。生存不易，咱们共同努力