Vue 條件插槽 (Conditional Slots) 完全指南：原理、實作與排版優化

有時候您會需要依據內容是否被傳入插槽來渲染某些內容的技巧。例如：如果您希望當使用者沒有提供內容時，元件的某個區塊就完全不要顯示，甚至連包裝用的 HTML 標籤都消失。

條件插槽的核心原理

Vue 元件實體提供了一個 $slots 物件，它包含了所有父元件傳遞進來的插槽內容。如果父元件有傳入內容，會是一個陣列/函數；如果父元件沒傳入內容，會是 undefined。我們就利用這個特性配合 v-if 來達成條件渲染。

如何在 Vue 中實作條件插槽？

在下面的案例中，定義了一個卡片元件，內部擁有兩個插槽，分別為 head、body。當 head、body 的內容存在時，希望提供額外的樣式。

選項式 API (Options API)

在 <template> 中可以直接透過內建的 $slots 全域變數進行判斷。

<template>
  <div class="card">
    <div v-if="$slots.head" class="card-head">
      <slot name="head"></slot>
    </div>

    <div v-if="$slots.body" class="card-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

組合式 API (Composition API)

如果使用的是 <script setup>，需要透過 useSlots 來存取插槽的狀態。

<script setup>
import { useSlots } from "vue";

const slots = useSlots();
</script>

<template>
  <div class="card">
    <div v-if="slots.head" class="card-head">
      <slot name="head"></slot>
    </div>

    <div v-if="slots.body" class="card-body">
      <slot name="body"></slot>
    </div>
  </div>
</template>

為什麼應該使用條件插槽？

維持乾淨的 DOM 結構

傳統做法常會留下空的 <div></div>。使用 條件插槽 可以確保 HTML 結構與資料狀態完全同步，這對於 SEO 爬蟲理解頁面權重與結構非常有幫助。

精確的樣式控制 (解決 CSS Bug)

這是在排版上最重要的好處。許多元件的包裝層會有 padding、margin 或 border。如果內容為空卻渲染了標籤，這些樣式會導致 UI 出現異常的空白間距。

提升渲染效能

減少瀏覽器需要處理的 DOM 節點數量，進而減輕樣式計算（Recalculate Style）與排版（Layout）的負擔。