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 與使用者體驗上，預設內容（也稱為後備內容）扮演重要角色：
- 不破版：即使資料尚未載入或開發者忘記傳入內容，元件依然能保有基本的視覺結構。
- 語意化：透過預設文字，能引導其他協作開發者理解該插槽的用途。
預設內容什麼時候會被取代？
規則只有一條：父元件有提供內容就整段取代，沒有就顯示預設值。這裡有幾個容易誤判的情況：
<!-- 顯示預設內容：標籤之間完全沒東西 -->
<Card />
<Card></Card>
<!-- 顯示預設內容：只有空白與換行會被忽略 -->
<Card>
</Card>
<!-- 不顯示預設內容：Vue 認為你傳了東西進來 -->
<Card>{{ emptyString }}</Card>
<Card><span></span></Card>換句話說，預設內容是 全有全無 的：父元件傳入的內容不會與預設值合併，而是整段替換掉。
一個元件只能有一個預設插槽
沒有寫 name 的 <slot>，名稱其實就是 default。如果在同一個元件裡放了兩個未命名的 <slot>，父元件傳入的同一份內容會被渲染兩次。需要多個區塊時，請改用 具名插槽。
插槽內容能用哪些資料？
插槽內容是在 父元件的作用域 中編譯的，因此它只看得到父元件的 響應式狀態：
<template>
<!-- ✅ userName 屬於父元件 -->
<Card>{{ userName }}</Card>
</template>若要在插槽內容中使用 子元件內部 的資料，例如：列表中每一筆項目，就必須改用 作用域插槽。
常見問題
什麼是插槽的預設內容 Fallback Content？
寫在 <slot> 標籤之間的內容就是預設內容。父元件沒有提供插槽內容時會顯示它，一旦父元件傳入內容就會被完全取代。
父元件傳入空白會顯示預設內容嗎？
純空白與換行會被視為沒有傳入內容，仍然顯示預設值。但若傳入的是空字串變數或空的元素，Vue 會認為有內容，預設值就不會出現。
一個元件可以有幾個預設插槽？
只能有一個。沒有 name 屬性的 <slot> 名稱其實就是 default，寫出兩個未命名的 <slot> 會讓同一份內容重複渲染兩次。需要多個區塊時請改用 具名插槽。
預設插槽的內容可以是元件嗎？
可以，插槽內容能放文字、HTML 結構或其他 Vue 元件。這些內容在父元件的作用域中編譯，因此只能使用父元件的資料。
為什麼建議一定要寫預設內容？
一來資料還沒載入或忘記傳入時版面不會塌掉，二來預設文字能讓其他協作者一眼看出這個插槽原本預期放什麼。
