useAttrs用於獲取未聲明的屬性和事件，useSlots用於處理插槽內(nèi)容。 1. useAttrs返回未在props中定義的屬性和事件，適用於屬性透傳和原生事件處理，如將class、id綁定到子組件元素。 2. useSlots返回插槽對象，用於判斷插槽是否存在或動態(tài)渲染插槽內(nèi)容，如根據(jù)是否有footer插槽決定是否顯示頁腳。 3. 實際應(yīng)用包括封裝基礎(chǔ)組件時透傳屬性、動態(tài)顯示插槽內(nèi)容，提升組件靈活性與復(fù)用性。

在Vue 3 的Composition API 中， useAttrs和useSlots是兩個非常實用的函數(shù)，尤其在開發(fā)可複用組件或封裝組件庫時特別有用。它們幫助我們處理組件接收到的非props 屬性和插槽內(nèi)容。這篇文章就來說說怎麼用好它們。

什麼是useAttrs？

useAttrs返回一個對象，裡麵包含了父組件傳遞給當(dāng)前組件但沒有在props中聲明的所有屬性和事件監(jiān)聽器。

舉個例子，如果你有一個組件接收了class 、 id或者原生事件如@click ，但這些沒有在props中定義，那它們就會出現(xiàn)在useAttrs中。

常見用途：

• 把屬性“透傳”給子組件，比如把class或style傳給內(nèi)部的<input> 。
• 處理原生事件，比如監(jiān)聽input事件但不想單獨(dú)聲明onInput作為prop。

使用方式：

 import { useAttrs } from 'vue'

export default {
  setup() {
    const attrs = useAttrs()
    return { attrs }
  }
}

然後你可以在模板中這樣用：

 <template>
  <input v-bind="attrs" />
</template>

這樣就能把所有未聲明的屬性都綁定到<input>上了。

什麼是useSlots？

useSlots返回一個對象，包含當(dāng)前組件接收到的所有插槽內(nèi)容。你可以用它來判斷插槽是否存在，或者動態(tài)渲染插槽內(nèi)容。

常見用途：

• 判斷是否有默認(rèn)插槽，決定是否顯示某個區(qū)域。
• 動態(tài)調(diào)用具名插槽，比如根據(jù)狀態(tài)顯示不同插槽內(nèi)容。
• 封裝高階組件時靈活處理插槽內(nèi)容。

使用方式：

 import { useSlots } from 'vue'

export default {
  setup() {
    const slots = useSlots()
    return { slots }
  }
}

使用插槽的例子：

 <template>
  <div>
    <h2>組件標(biāo)題</h2>
    <div v-if="slots.default">
      <slot />
    </div>
    <div v-if="slots.footer">
      <slot name="footer" />
    </slot>
  </div>
</template>

或者在setup 中判斷插槽是否存在：

 if (slots.default) {
  // 做點(diǎn)什麼}

useAttrs 和useSlots 的實際應(yīng)用場景

1. 封裝基礎(chǔ)組件時透傳屬性

比如你封裝一個自己的<MyInput>組件，它內(nèi)部其實是一個原生的<input> 。你希望父組件傳來的placeholder 、 type 、 class等屬性都能直接作用在<input>上，但又不想一個個寫成props。

這時候就可以用useAttrs ：

 const attrs = useAttrs()
return { attrs }

模板裡：

 <input v-bind="attrs" />

這樣就能自動接收所有屬性，非常方便。

2. 動態(tài)顯示插槽內(nèi)容

比如你寫一個卡片組件，有時候希望顯示頁腳，有時候不顯示。你就可以用useSlots來判斷是否存在footer插槽：

 const slots = useSlots()
const hasFooter = computed(() => !!slots.footer)

然後在模板中根據(jù)這個值決定是否渲染頁腳區(qū)域。

小貼士

• 在<script setup></script>語法中使用時， useAttrs和useSlots不需要顯式返回，可以直接在模板中使用。
• useAttrs包含的屬性會自動同步到組件的$attrs上。
• 使用v-bind="attrs"時，要注意如果某些屬性是響應(yīng)式的，可能需要手動處理，Vue 不會自動追蹤。

基本上就這些， useAttrs和useSlots看起來簡單，但在組件封裝中非常實用。用好它們，能讓你的組件更靈活、更通用。

以上是如何在VUE 3組成API中使用UseAttrs和useslots的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！