Vueは動的コンポーネントを使用してTAB切り替え効果を実現します

「./components/one」から1つをインポートします。
「./components/two」から2つをインポートします。
「./components/three」から3つをインポートします。
「./components/four」から 4 をインポートします。

コンポーネント:
    1つ、
    二、
    三つ、
    4、
  },

<テンプレート>
  <div id="アプリ">
    <div class="top">
     <!-- タブのクリック ラベルを配置します -->
    </div>
    <div class="bottom">
      <!-- 対応するコンテンツを表示するために動的コンポーネントを配置します-->
    </div>
  </div>
</テンプレート>

// まず、クリックされたタブのデータを格納するために、data に配列 cardArr を定義します。data() {
        戻る {
          インデックス: 0,
          カードArr: [
            {
              コンポーネント名: "動的コンポーネント 1",
            },
            {
              コンポーネント名: "動的コンポーネント 2",
            },
            {
              コンポーネント名: "動的コンポーネント 3",
            },
            {
              コンポーネント名: "ダイナミックコンポーネント4",
            },
          ]、
        };
      },
// 次に、v-for ループを使用して <template> を表示します。
      <div id="アプリ">
        <div class="top">
          <div
            クラス="crad"
            :class="{highLight: whichIndex == index }"
            v-for="(アイテム、インデックス) in cardArr"
            :key="インデックス"
            @click="whichIndex = インデックス"
          >
            {{ item.componentName }}
          </div>
        </div>
        <div class="bottom">
          <!-- 動的コンポーネントを配置します... -->
        </div>
      </div>
    </テンプレート>
// ハイライトされた状態が必要なので、最初にハイライトされるインデックス0を設定します。これは、データで定義されたwhichIndexと:classを使用して実現します。 // ​​ハイライトスタイル.highLight {
      ボックスの影: 0 15px 30px rgba(0, 0, 0, 0.2);
      変換: translate3d(0, -1px, 0);
    }

    // 動的コンポーネント タグ <component/> には is 属性があります。is の値によってコンポーネントの値が決まります。
    // ここでは変数componentIdを使用して保存し、componentIdを<div class="bottom">として表示します。
        <コンポーネント:is="コンポーネントID"></コンポーネント>
    </div>
    
    // デフォルトでは、最初のものを最初に表示します。同時に、cardList 内のコンポーネント名とコンポーネント ID を互いに対応させる必要があります。
    // データは次のように変更する必要があります data() {
        戻る {
          インデックス: 0,
          componentId: "one", // 値は、コンポーネントオブジェクトに登録したインポートされたコンポーネントの名前です。cardArr: [
            {
              コンポーネント名: "動的コンポーネント 1",
              componentId: "one", // 対応する},
            {
              コンポーネント名: "動的コンポーネント 2",
              componentId: "two", // 対応する},
            {
              コンポーネント名: "動的コンポーネント 3",
              componentId: "three", // それに対応する},
            {
              コンポーネント名: "ダイナミックコンポーネント4",
              componentId: "four", // それに対応する},
          ]、
        };
      },

<テンプレート>
  <div id="アプリ">
    <div class="top">
      <div
        クラス="crad"
        :class="{highLight: whichIndex == index }"
        v-for="(アイテム、インデックス) in cardArr"
        :key="インデックス"
        @クリック="
          whichIndex = インデックス;
          コンポーネントID = アイテム.コンポーネントID; 
        「
      >
          <!-- @click タグ内にセミコロンで区切って複数の操作コードを記述できます -->
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
    <!-- キャッシュ コンポーネントをキープアライブ状態に維持します。これにより、コンポーネントが破棄されず、DOM が再レンダリングされなくなります。
    ブラウザはリフローや再描画を行わないため、パフォーマンスを最適化できます。使用しない場合は、ページの読み込みが遅くなります。
      <キープアライブ>
        <コンポーネント:is="コンポーネントID"></コンポーネント>
      </キープアライブ>
    </div>
  </div>
</テンプレート>

<テンプレート>
  <div id="アプリ">
    <div class="top">
      <div
        クラス="crad"
        :class="{highLight: whichIndex == index }"
        v-for="(アイテム、インデックス) in cardArr"
        :key="インデックス"
        @クリック="
          whichIndex = インデックス;
          コンポーネントID = アイテム.コンポーネントID;
        「
      >
        {{ item.componentName }}
      </div>
    </div>
    <div class="bottom">
      <キープアライブ>
        <コンポーネント:is="コンポーネントID"></コンポーネント>
      </キープアライブ>
    </div>
  </div>
</テンプレート>

<スクリプト>
「./components/one」から1つをインポートします。
「./components/two」から2つをインポートします。
「./components/three」から3つをインポートします。
「./components/four」から 4 をインポートします。
エクスポートデフォルト{
  コンポーネント:
    1つ、
    二、
    三つ、
    4、
  },
  データ（） {
    戻る {
      インデックス: 0,
      コンポーネントID: "1",
      カードArr: [
        {
          コンポーネント名: "動的コンポーネント 1",
          コンポーネントID: "1",
        },
        {
          コンポーネント名: "動的コンポーネント 2",
          コンポーネントID: "2",
        },
        {
          コンポーネント名: "動的コンポーネント 3",
          コンポーネントID: "3",
        },
        {
          コンポーネント名: "ダイナミックコンポーネント4",
          コンポーネントID: "4",
        },
      ]、
    };
  },
};
</スクリプト>

<style lang="less" スコープ>
＃アプリ {
  幅: 100%;
  高さ：100vh;
  ボックスのサイズ: 境界線ボックス;
  パディング: 50px;
  .トップ{
    幅: 100%;
    高さ: 80px;
    ディスプレイ: フレックス;
    コンテンツの両端揃え: スペースを空ける;
    .crad {
      幅: 20%;
      高さ: 80px;
      行の高さ: 80px;
      テキスト配置: 中央;
      背景色: #fff;
      境界線: 1px 実線 #e9e9e9;
    }
    .ハイライト{
      ボックスの影: 0 15px 30px rgba(0, 0, 0, 0.2);
      変換: translate3d(0, -1px, 0);
    }
  }
  。底 {
    上マージン: 20px;
    幅: 100%;
    高さ: calc(100% - 100px);
    境界線: 3px ピンク
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
  }
}
</スタイル>