Vue ＜component/＞ 特殊的内置组件使用

在 Vue 中， 是一个特殊的内置组件，它可以根据提供的数据动态地渲染不同的子组件。这个功能非常有用，因为它可以让你在不同的情况下动态地切换和渲染不同的组件。

将is的值绑定为一个变量，is就变成了v-bind:is=“变量名”，即 ：is=“变量名”。当变量名赋值为哪个自定义组件名时，拥有：is=“变量名”属性的元素就会渲染为响应的组件。

简单的小demo

<template>
  <div>
    <div class="tabs">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="currentTab = tab"
      >
        {{ tab }}
      </button>
    </div>

    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
import Tab1 from "./BaseSetting.vue";
import Tab2 from "./changePassword.vue";
import Tab3 from "./changePassword.vue";

export default {
  data() {
    return {
      tabs: ["Tab1", "Tab2", "Tab3"],
      currentTab: "Tab1",
    };
  },
  computed: {
    currentTabComponent() {
      return this.currentTab === "Tab1"
        ? Tab1
        : this.currentTab === "Tab2"
        ? Tab2
        : this.currentTab === "Tab3"
        ? Tab3
        : null;
    },
  },
  components: {
    Tab1,
    Tab2,
    Tab3,
  },
};
</script>