2023年度鐵人_[Day 24] 父子組件常見操作_part4.vue動態組件實作

Vue 中的動態組件是指當在父組件中需要對多個子組件進行來回的切換，此時就能使用動態組件來實現。
例如，將 comp1.vue、comp2.vue 和 comp3.vue 做成一組切換，每次只能呈現一個組件。
當切換到 comp2.vue 組件時，comp1.vue 和 comp3.vue 組件從頁面卸載，只讓 comp2.vue 組件渲染。

動態組件的功能是在父組件或根組件上使用的，需要事先將切換的多個組件導入。

然後在 HTML 模板< template >中，使用固定的< component >元素來載入組件。

語法如下：

<component :is="tabs[currentTab]"></component>

< component >是元素裡面的 :is 是屬性，加上冒號（:is）表示可以動態變化，可使用響應式的變數。
tabs 是一個數組的名稱，該名稱是任意的，該數組中存放導入或註冊的組件名稱。
[currentTab]是一個動態匹配的模式，[]中括號是固定的，currentTab 代表一個響應式變數，其值必須為 tabs 數組中的某個組件名。

在此用兩個組件在 App.vue 中來回切換，模擬動態組件的實作。
於src/components目錄下產生comp1.vue 跟 comp2.vue
comp1.vue

<!-- eslint-disable --> 
<template>
    <div class="m-3 alert alert-info">
        component 1
    </div>
</template>

comp2.vue

<!-- eslint-disable --> 
<template>
    <div class="m-3 alert alert-success">
        component 2
    </div>
</template>

回到我們的 App.vue

<template>
  <main>
    <component :is="tabs[curTab]"></component>
  </main>
</template>

<script setup>
  import comp1 from './components/comp1.vue';
  import comp2 from './components/comp2.vue';
  import {ref} from 'vue';

  const tabs = {
    comp1,
    comp2
  };

  const curTab = ref('comp2');
</script>

也可切換
const curTab = ref('comp1');