Vue uses dynamic components to achieve TAB switching effect

Problem Description
What is Vue's dynamic component
Application scenario description

Implementation steps

Step 1 (create a new component and introduce registration)
Step 2 (Layout, put the tab click label on the top, and put the component below to present the corresponding content)
Step 3 (write the tab above and click on the label)
Step 4 (Use dynamic component tag <component/>)
Step 5 (Click a tab component to dynamically change the corresponding componentId value)

The complete code is attached

Problem Description

Tab switching scenarios are often used in development. When we need to achieve this effect, we often think of the following way to achieve this effect.

Method 1: Use display:none; to control the display and hiding of DOM elements. Thereby realizing the display and hiding of two tabs. However, if there are three or four tabs to switch, this method is not advisable.
Method 2 is implemented using the v-if or v-show directive in Vue. This method can be implemented, but the code is not elegant. Imagine what would happen if a bunch of v-if appeared in a .vue file? And when using v-if, you have to declare a lot of variables for identification. So it's not a very good solution
Method 3: Use the tab switching component in elementui or iview. This method is also OK, but sometimes it requires /deep/ modification of the style, which is a bit troublesome.

The author believes that it would be more convenient to use vue's dynamic components to achieve the tab switching effect.

What is Vue's dynamic component

Vue's dynamic component is essentially still a component. In layman's terms, a component is a UI view layer with js logic. The so-called dynamic component means that we can dynamically control the specific component displayed in a certain place on the page according to some conditions. This sounds a bit like switching tabs.

Application scenario description

Demand effect diagram

In fact, it is very simple, it is just the effect of switching tabs. Of course, in actual development, the style effect of the tab may be slightly more complicated.

Implementation steps

Step 1 (create a new component and introduce registration)

First, define four .vue files in the components folder as the content part presented by tab switching, and you can use them by importing them.

New

Import and register

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,
  },

Step 2 (Layout, put the tab click label on the top, and put the component below to present the corresponding content)

<template>
  <div id="app">
    <div class="top">
     <!-- Place the tab click label-->
    </div>
    <div class="bottom">
      <!-- Place dynamic components to present corresponding content-->
    </div>
  </div>
</template>

Step 3 (write the tab above and click on the label)

// First, we define the array cardArr in data to store the data of the clicked tab data() {
        return {
          whichIndex: 0,
          cardArr: [
            {
              componentName: "Dynamic Component 1",
            },
            {
              componentName: "Dynamic Component 2",
            },
            {
              componentName: "Dynamic Component Three",
            },
            {
              componentName: "Dynamic Component Four",
            },
          ],
        };
      },
// Then use v-for loop to present <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">
          <!-- Place dynamic components... -->
        </div>
      </div>
    </template>
// Because we need to have a highlighted state, we initially set the index 0 to be the first highlighted, using whichIndex and :class defined in data to achieve // Highlight style.highLight {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
      transform: translate3d(0, -1px, 0);
    }

Step 4 (Use dynamic component tag <component/>)

    // The dynamic component tag <component/> has an is attribute. The value of is determines the value of the component.
    // Here we use a variable componentId to store it, and display the componentId as <div class="bottom">
        <component :is="componentId"></component>
    </div>
    
    // By default, we will present the first one first. At the same time, we need to make the component name and component id in cardList correspond to each other.
    // So data should be modified like this data() {
        return {
          whichIndex: 0,
          componentId: "one", // The value is the name of the imported component we registered in the components object cardArr: [
            {
              componentName: "Dynamic Component 1",
              componentId: "one", // to correspond to},
            {
              componentName: "Dynamic Component 2",
              componentId: "two", // to correspond to},
            {
              componentName: "Dynamic Component Three",
              componentId: "three", // to correspond to it},
            {
              componentName: "Dynamic Component Four",
              componentId: "four", // to correspond to it},
          ],
        };
      },

Step 5 (Click a tab component to dynamically change the corresponding componentId value)

<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 You can write multiple operation codes in the tag, separated by semicolons -->
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
    <!-- keep-alive cache components, so that the components will not be destroyed and the DOM will not be re-rendered.
    The browser will not reflow and redraw, so performance can be optimized. If you don't use it, the page will load more slowly.
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </div>
  </div>
</template>

The complete code is attached

<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: "Dynamic Component 1",
          componentId: "one",
        },
        {
          componentName: "Dynamic Component 2",
          componentId: "two",
        },
        {
          componentName: "Dynamic Component Three",
          componentId: "three",
        },
        {
          componentName: "Dynamic Component Four",
          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>

The above is the details of how Vue uses dynamic components to achieve TAB switching effects. For more information about how Vue uses dynamic components to achieve TAB switching effects, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: