Vue動態元件

在 Vue.js 中，動態元件是一種非常強大的功能，允許我們根據應用的狀態或用戶輸入來動態地切換元件。這篇教學將介紹如何使用 Vue 的 <component> 元素來實現動態元件，並使用 Vue 3 和 TypeScript 的 <script setup> 語法進行實作。

基本使用方式

首先，讓我們來看看 <component> 元素的基本用法。假設我們有三個元件：HomeComponent、AboutComponent 和 ContactComponent。

<!-- HomeComponent.vue -->
<template>
  <div>Home</div>
</template>

<!-- AboutComponent.vue -->
<template>
  <div>About</div>
</template>

<!-- ContactComponent.vue -->
<template>
  <div>Contact</div>
</template>

接著，我們可以在主應用中動態切換這些元件：

<template>
  <div>
    <button @click="currentComponent = 'HomeComponent'">Home</button>
    <button @click="currentComponent = 'AboutComponent'">About</button>
    <button @click="currentComponent = 'ContactComponent'">Contact</button>
    
    <component :is="currentComponent"></component>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import HomeComponent from './HomeComponent.vue';
import AboutComponent from './AboutComponent.vue';
import ContactComponent from './ContactComponent.vue';

const currentComponent = ref('HomeComponent');
</script>

在這個例子中，我們使用 :is 屬性來動態切換元件。當 currentComponent 的值改變時，顯示的元件也會相應改變。

使用物件映射

另一種常見的做法是使用物件來映射元件，而不是直接使用元件名。這樣可以使程式碼更具可讀性和可維護性。

<template>
  <div>
    <button @click="currentComponent = 'home'">Home</button>
    <button @click="currentComponent = 'about'">About</button>
    <button @click="currentComponent = 'contact'">Contact</button>
    
    <component :is="components[currentComponent]"></component>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import HomeComponent from './HomeComponent.vue';
import AboutComponent from './AboutComponent.vue';
import ContactComponent from './ContactComponent.vue';

const currentComponent = ref('home');
const components = {
  home: HomeComponent,
  about: AboutComponent,
  contact: ContactComponent
};
</script>

傳遞屬性與事件

當使用動態元件時，我們依然可以像使用普通元件一樣傳遞屬性和事件。

<template>
  <div>
    <Component :is="currentComponent" :msg="message" @custom-event="handleEvent" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import HomeComponent from './HomeComponent.vue';
import AboutComponent from './AboutComponent.vue';
import ContactComponent from './ContactComponent.vue';

const currentComponent = ref('HomeComponent');
const message = ref('Hello from parent');

const handleEvent = (payload: any) => {
  console.log('Event received:', payload);
};

</script>

在這個例子中，我們向動態元件傳遞了一個 msg 屬性，並監聽了一個自定義事件 custom-event。

結論

動態元件是一個非常有用的功能，允許我們在 Vue 應用中根據不同的條件動態切換元件。通過使用 <component> 元素和 :is 屬性，我們可以實現靈活且可維護的元件切換邏輯。希望這篇教學能幫助你更好地理解和使用 Vue 的動態元件。