useAttrs 返回未聲明為 props 的組件屬性，用于手動(dòng)將其綁定到特定元素；useSlots 提供插槽內(nèi)容的對(duì)象，可按名稱檢查和渲染插槽。兩者常用于創(chuàng)建需精確控制屬性和插槽的高階或包裝組件，并在 setup 中配合 fragments 使用。

In Vue 3's Composition API, useAttrs and useSlots are utility functions that give you access to the attributes and slots passed to a component. They’re especially useful when creating wrapper components or higher-order abstractions where you need fine-grained control over how props, attributes, and content are handled.

What is useAttrs?

useAttrs returns an object containing the component’s inherited attributes (like class, style, or custom event listeners) that are not declared as props. This is helpful when you want to manually apply these attributes to a specific element in your template — commonly used in wrapper or UI components.

By default, if a component has a single root element, attributes are automatically applied to it. But with setup() and fragments (multiple root nodes), automatic attribute fallthrough doesn’t happen, so useAttrs gives you explicit control.

Suppose you have a custom input wrapper:

import { useAttrs } from 'vue'

export default {
  setup() {
    const attrs = useAttrs()
    return { attrs }
  },
  template: `
    <div class="input-wrapper">
      <input v-bind="attrs" />
    </div>
  `
}

Now, when someone uses this component:

<MyInput v-model="text" placeholder="Enter text" class="large" @focus="onFocus" />

All those attributes (placeholder, class, @focus, and even v-model bindings) are passed through to the inner via v-bind="attrs".

What is useSlots?

useSlots returns an object representing the slots passed to the component. Each key corresponds to a slot name (e.g., default, header, footer). Slot values are arrays of VNodes (virtual nodes), which you can render conditionally or pass down.

This is useful when writing renderless components or when you need to inspect or manipulate slot content before rendering.

A card component with optional header and footer:

import { useSlots } from 'vue'

export default {
  setup() {
    const slots = useSlots()
    return { slots }
  },
  template: `
    <div class="card">
      <header v-if="slots.header">
        <slot name="header" />
      </header>
      <main>
        <slot />
      </main>
      <footer v-if="slots.footer">
        <slot name="footer" />
      </footer>
    </div>
  `
}

You can now check if a slot exists using slots.header before rendering it — preventing empty wrappers.

When to Use Them

• useAttrs: Use when building reusable wrappers (e.g., form inputs, buttons, modals) and you want to forward attributes like events or classes to internal elements.
• useSlots: Use when you need conditional rendering of slots or when working with dynamic slot logic (e.g., layout components, tabs, or toolbars).

Both functions are fully reactive and update automatically when the parent passes new props or content.

Basically, useAttrs and useSlots give you low-level access to Vue’s component composition features, making it easier to write flexible, reusable components without losing inheritance behavior.

以上是如何在 Vue.js 組合 API 中使用 useAttrs 和 useSlots的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！