useAttrs returns component attributes not declared as props, used for manually binding them to specific elements; useSlots provides an object of slot contents, allowing slots to be inspected and rendered by name. Both are often used to create higher-order or wrapper components that require precise control of properties and slots, and are used in conjunction with fragments in setup.

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 (eg, 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 (eg, 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 (eg, 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.

The above is the detailed content of How to use useAttrs and useSlots in the Vue.js Composition API. For more information, please follow other related articles on the PHP Chinese website!