はじめに

Vue.js を学習していて、動的コンポーネント(:is="")を活用して、タブ機能を作成してみました。
（Vue CLI を使用）

こういうやつ↓↓

Vue CLI ディレクトリ構造

主要ファイルの記述

以下に主要ファイルのコードを記載する

index.html
main.js
Tab1.vue
Tab2.vue
Tab3.vue
App.vue

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>Vue.js タブ</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

main.js

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App), // render関数にてApp.vueをレンダリング
}).$mount('#app') // index.htmlのid=appをマウント

App.vueの子コンポーネントファイルを3つ用意

Tab1.vue

<template>
  <div>
    <p>タブ１だよ</p>
  </div>
</template>

Tab2.vue

<template>
  <div>
    <p>タブ２だよ</p>
  </div>
</template>

Tab3.vue

<template>
  <div>
    <p>タブ３だよ</p>
  </div>
</template>

上記3つの子コンポーネントの親コンポーネントファイルが App.vue

App.vue

<template>
  <div>
    <ul class="tabs-menu">
      <li
        :class="{ active: currentTab === 'Tab1' }"
        @click="currentTab = 'Tab1'"
      >タブ１</li>
      <li
        :class="{ active: currentTab === 'Tab2' }"
        @click="currentTab = 'Tab2'"
      >タブ２</li>
      <li
        :class="{ active: currentTab === 'Tab3' }"
        @click="currentTab = 'Tab3'"
      >タブ３</li>
    </ul>
    <div class="tabs-content">
      <component :is="currentTab"></component>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      currentTab: 'Tab1',
    };
  },
  components: {
    Tab1,
    Tab2,
    Tab3,
  }
}
</script>

<style scoped>
body {
  color: #3f4548;
}

/* ulのデフォルトスタイルを消去 */
.tabs-menu {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* タブの基本スタイル */
.tabs-menu li {
  display: block;
  float: left;
  margin-right: 8px;
  margin-bottom: -1px;
  padding: 10px 20px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  color: #557f95;
  text-decoration: none;
}

/* タブにマウスを乗せたらカーソルの形を変える */
.tabs-menu li:hover {
  cursor: pointer;
}

/* 非選択のタブにマウスを乗せたら色を変える */
.tabs-menu li:not(.active):hover {
  border-color: #f0f0f0 #f0f0f0 #999;
  background-color: #f0f0f0;
}

/* 選択中のタブ */
.tabs-menu .active {
  border-color: #999 #999 transparent #999;
  background-color: #f0fbff;
  color: black;
}

/* タブコンテンツ表示エリア */
.tabs-content {
  clear: both;
  background-color: #f0fbff;
  border: 1px solid #999;
  border-radius: 0 4px 4px 4px;
  padding: 10px 10px 30px 10px;
}
</style>

以下で App.vue について解説↓↓

App.vue について解説

子コンポーネントファイルを読み込み

App.vue

<!-- 一部抜粋 -->
<script>
import Tab1 from "./components/Tab1.vue";
import Tab2 from "./components/Tab2.vue";
import Tab3 from "./components/Tab3.vue";

// 省略

</script>

コンポーネントをローカル登録

App.vue

<!-- 一部抜粋 -->
<script>
  components: {
    Tab1,
    Tab2,
    Tab3,
  }
}
</script>

表示タブの初期値はTab1に設定

App.vue

<!-- 一部抜粋 -->
<script>
export default {
  data() {
    return {
      currentTab: 'Tab1',
    };
  },
}
</script>

@click="currentTab = 'TabX'"でタブをクリックすると currentTab の値にコンポーネント名を代入する。

そして、<component :is="currentTab"></component> のcurrentTab に代入されている値によって表示するコンポーネントを判別させている。

:class="{ active: currentTab === 'Tab1' }"
はcurrentTabがTab1であればactiveクラスを付与している。

App.vue

<template>
  <div>
    <ul class="tabs-menu">
      <li
        :class="{ active: currentTab === 'Tab1' }"
        @click="currentTab = 'Tab1'"
      >タブ１</li>
      <li
        :class="{ active: currentTab === 'Tab2' }"
        @click="currentTab = 'Tab2'"
      >タブ２</li>
      <li
        :class="{ active: currentTab === 'Tab3' }"
        @click="currentTab = 'Tab3'"
      >タブ３</li>
    </ul>
    <div class="tabs-content">
      <component :is="currentTab"></component> <!-- ここで表示するコンポーネントを動的に切り替えている -->    
    </div>
  </div>
</template>

最後に

<component :is="コンポーネント名"></component>を使えば、v-if v-showを使わずに簡単に動的にコンポーネントの切り替えができた。

ご指摘などありましたら、お気軽にお願いします。

●参考リファレンス
Vue.js 動的 & 非動的コンポーネント