Vue 具名插槽 (Named Slots) 詳解：輕鬆管理元件中的多個預留位置

當您開發的 Vue 元件結構較為複雜（例如：包含頁首、頁尾與側邊欄的 Layout 元件）時，單一的預設插槽已不足夠。這時就需要使用 具名插槽 (Named Slots) 來精準指定內容的填入位置。

使用具名插槽，您不需要擔心 HTML 的先後順序或 CSS 版面配置，只要將內容分配給對應的名稱，子元件就會自動將它們安置在正確的預定義位置。

具名插槽實作步驟

子元件：定義具名插槽 name

元件中分別給予 <slot> 定義唯一的 name 屬性，如: foot、extra。

<!-- /components/Card.vue -->
<template>
  <div class="card">
    <div class="card-head">
      <img class="card-image" src="https://picsum.photos/320/180" alt="" />
    </div>
    <div class="card-body">
      <h2 class="card-title">卡片標題</h2>
      <p class="card-description">
        卡片描述~卡片描述~卡片描述~卡片描述~片描述~
      </p>
    </div>
    <div class="card-foot">
      <slot name="foot"></slot>
    </div>
    <div class="card-extra">
      <slot name="extra"></slot>
    </div>
  </div>
</template>

父元件：使用 v-slot 或 # 語法傳入內容

在父元件呼叫時，必須使用 <template> 標籤並配合 v-slot 指令來對準目標插槽。

標籤中加入指定插槽的名稱，指定名稱的方式有二:

• 標準語法：v-slot:foot。
• 簡寫語法：#foot。

<!-- /views/Slot.vue -->
<template>
  <card>
    <template #foot>
      <input type="button" value="click" />
    </template>
  </card>
</template>

為什麼要使用具名插槽？

結構化版面配置

讓元件的內部結構（HTML/CSS）由子元件控制，而具體內容（數據/按鈕）由父元件決定。

語意清晰

透過 foot、header、sidebar 等名稱，程式碼的閱讀性大幅提升。

靈活性提升

父元件可以選擇性地填入部分插槽，未填入的部分則可以顯示子元件設定的預設內容。