摘要

useAttrs 和 useSlots 是兩個只能在 <script setup> 中使用的函數，它們分別用來獲取傳遞給元件的「透傳屬性」(fallthrough attributes) 和「插槽」(slots)。

定義與說明

useAttrs()：回傳一個包含了所有未被 props 聲明的屬性（如 class, style, id 或非 prop 屬性）的物件。常用於將這些屬性手動應用到子元件的某個特定根元素上。

useSlots()：回傳一個包含了所有插槽的物件，讓你可以像存取物件屬性一樣，在 <script> 邏輯中存取和判斷插槽是否存在或進行條件渲染。

實作範例

Vue SFC

<!-- MyButton.vue -->
<script setup>
import { useAttrs, useSlots } from 'vue';

const attrs = useAttrs(); // 獲取如 class, style, data-* 等屬性
const slots = useSlots(); // 獲取所有插槽

// attrs.class 會得到父層傳來的 class
</script>

<template>
  <button :class="attrs.class">
    <!-- 檢查是否有 icon 插槽 -->
    <i v-if="slots.icon" class="icon"><slot name="icon"></slot></i>
    <slot></slot> <!-- 預設插槽 -->
  </button>
</template>

結論

useAttrs 和 useSlots 讓我們在 <script setup> 的邏輯區塊中，也能完全存取到元件的外部傳入的屬性和插槽，這對於開發需要高度自訂和靈活性的高階基礎元件至關重要。

useAttrs useSlots 屬性與插槽