Vue 基本插槽 (Default Slot) 完全指南：實作高度彈性的 UI 元件

在 Vue.js 框架中，基本插槽（Default Slot） 是元件開發中最基礎且強大的功能。它允許開發者在子元件中定義「預留位置」，並讓父元件決定最終要呈現的內容。

什麼是基本插槽？

當您在元件標籤之間插入內容時，Vue 會自動將這些內容填入子元件內部的 <slot> 標籤位置。這是達成「元件封裝」與「內容靈活性」平衡的最佳方式。

基本插槽實作步驟

建立子元件：定義插槽位置

首先，建立一個名為 Card.vue 的元件，我們使用 <slot> 標籤來「挖個洞」，並在裡面寫入 預設內容。

<!-- /components/Card.vue -->
<template>
  <section class="card">
    <slot>預設文字，如果沒傳內容就會顯示我</slot>
  </section>
</template>

父元件呼叫：注入自定義內容

在父元件中匯入 Card，並在標籤之間加入您想要顯示的內容。

<!-- /views/Slot.vue -->
<script setup>
import Card from "@/components/Card.vue";
</script>

<template>
  <card>我是插槽內容</card>
</template>

關鍵觀念：預設內容 (Fallback Content)

在 SEO 與使用者體驗上，預設內容（也稱為後備內容）扮演重要角色：

• 不破版：即使資料尚未載入或開發者忘記傳入內容，元件依然能保有基本的視覺結構。
• 語意化：透過預設文字，能引導其他協作開發者理解該插槽的用途。