Vue 動態插槽 (Dynamic Slots) 完全指南：實作具備極致彈性的元件

動態插槽允許我們使用 JavaScript 變數 來決定要將內容插入哪一個插槽？透過方括號 [] 語法，我們可以根據邏輯、資料或 API 回傳的結果，動態地改變插槽名稱，讓元件的擴展性達到最高水準。

為什麼要使用動態插槽

在 Vue 的開發旅程中，我們已經學會了基礎插槽、具名插槽與作用域插槽。然而，當您面對 高度通用型 的元件，例如：動態表單、可配置的數據表格時，插槽的名稱可能無法在撰寫程式碼時「寫死」。這時，動態插槽 (Dynamic Slots) 就是您的終極解決方案。

核心觀念：動態名稱綁定

動態插槽的核心在於 v-slot 的參數可以使用動態變數。其語法規則如下：

• 標準語法： v-slot:[slotName]。
• 縮寫語法：#[slotName]。

當 slotName 的值改變時，Vue 會自動更新內容注入的位置。這在處理「根據配置生成的元件」時非常強大。

如何在 Vue 中實作動態插槽？

子元件：準備接收動態內容

子元件只需要像平常一樣定義多個具名插槽，或者根據資料循環生成插槽。

<template>
  <div class="dynamic-card">
    <div class="header">
      <slot name="header">預設標題</slot>
    </div>

    <div class="content">
      <slot name="main"></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

父元件：使用變數決定插槽位置

父元件透過變數來切換內容要出現在哪一個插槽。

<script setup>
import { ref } from "vue";
import DynamicCard from "@/components/DynamicCard.vue";

// 動態名稱變數
const currentSlot = ref("main");

// 切換插槽的邏輯
const toggleSlot = () => {
  currentSlot.value = currentSlot.value === "main" ? "footer" : "main";
};
</script>

<template>
  <div>
    <button @click="toggleSlot">切換渲染位置</button>
    <p>目前渲染位置：{{ currentSlot }}</p>

    <DynamicCard>
      <template #[currentSlot]>
        <div class="highlight">我是被動態傳入的內容！</div>
      </template>
    </DynamicCard>
  </div>
</template>

為什麼要使用動態插槽？

極致的元件抽象化

當您開發「中台系統」或「元件庫」時，您無法預期使用者會定義多少個區域。動態插槽讓您能根據配置檔（JSON）來生成 UI。

減少冗餘程式碼

避免在樣板中使用大量的 v-if / v-else-if 來判斷該渲染哪一個插槽。

動態版面配置切換

適合用於需要即時改變內容分佈的場景，例如可自定義面板位置的儀表板。

注意事項

• 名稱限制：動態插槽名稱若為 null，則該插槽會被移除。避免使用非字串類型的值。
• 語法約束：方括號內不可包含空格或引號（例如 #[ 'my' + slot ] 是無效的）。若有複雜邏輯，請先在 computed 計算好名稱。
• 效能考量：雖然 Vue 處理動態插槽非常高效，但過度頻繁地切換插槽名稱可能會導致元件頻繁重新渲染，需注意效能平衡。