In Vue, slots are essential for building reusable and flexible components, and there are three main types: default, named, and scoped. Default slots allow a parent to pass content into a child component with no specific placement, ideal for single-section components like cards. Named slots enable multiple content insertion points by assigning names to slots, giving precise control over where each piece of content appears, such as in headers, footers, or sidebars. Scoped slots go further by allowing data from the child component to be passed back to the parent, enabling dynamic rendering based on internal state while maintaining separation of concerns. These slot types collectively enhance reusability, customization, and maintainability in Vue component design.

When building reusable components in Vue, one of the most powerful tools for composition is slots. They let you pass content into a component from the parent, making it more flexible and dynamic. There are three main types of slots in Vue: default, named, and scoped (also known as render props or scoped slots). Each has its own use case and helps you structure your UI more effectively.

Let’s break them down one by one and see how they help with component design.

Default Slots – The Basic Way to Pass Content

A default slot is the simplest type. It allows the parent component to pass any HTML or Vue template content into a child component.

For example, imagine you have a <card></card> component that wraps some content:

<!-- Card.vue -->
<template>
  <div class="card">
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

You can then use it like this:

<!-- ParentComponent.vue -->
<Card>
  <p>This is the content inside the card.</p>
</Card>

This works well when you only need to inject a single piece of content. But what if you want to place different parts of content in specific areas of the component? That’s where named slots come in.

Named Slots – Customize Specific Sections

Named slots allow you to define multiple insertion points in a component. You give each slot a name, and the parent component specifies which content goes where.

Here’s an example using a layout component:

<!-- Layout.vue -->
<template>
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot> <!-- default slot -->
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</template>

And here’s how you’d use it:

<!-- ParentComponent.vue -->
<Layout>
  <template #header>
    <h1>Page Title</h1>
  </template>

  <p>Main page content goes here.</p>

  <template #footer>
    <p>Copyright ? 2025</p>
  </template>
</Layout>

• Use #header or v-slot:header to target a named slot.
• The default slot still works without a name.
• This gives you control over where each part of the parent's template appears in the child component.

Scoped Slots – Pass Data Back to the Parent

Scoped slots are a bit more advanced but super useful. They allow a child component to pass data back to the parent, which can then be used in the slot content.

Think of it like giving the parent access to internal component data so it can customize rendering.

Example: a reusable list component that lets the parent decide how each item is displayed.

<!-- List.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, label: 'Apple' },
        { id: 2, label: 'Banana' },
        { id: 3, label: 'Cherry' }
      ]
    };
  }
};
</script>

Now the parent can customize how each item looks:

<!-- ParentComponent.vue -->
<List v-slot="{ item }">
  <strong>{{ item.label }}</strong>
</List>

• The child passes item to the slot scope.
• The parent uses destructuring ({ item }) to get that data.
• This makes the component highly customizable without changing its internal logic.

You can also combine scoped slots with named slots if needed:

<!-- ComplexComponent.vue -->
<template>
  <slot name="default" :user="user" :roles="roles"></slot>
</template>

Then use it like:

<ComplexComponent>
  <template #default="{ user, roles }">
    <p>User: {{ user.name }}</p>
    <ul>
      <li v-for="role in roles" :key="role">{{ role }}</li>
    </ul>
  </template>
</ComplexComponent>

Why Use Slots?

Slots are essential because they promote reusability and customization at the same time. With slots, you can:

• Build generic UI wrappers (like modals, cards, layouts) that accept any content.
• Let parent components dictate how certain parts are rendered while keeping the overall structure consistent.
• Share logic in a component while letting the parent control the visuals via scoped slots.

They’re especially useful when creating component libraries or designing reusable layouts.

So yeah, slots in Vue — default, named, and scoped — are not just about inserting content. They're about enabling smart, flexible, and maintainable component structures. Basically, they make your components feel alive and adaptable.

The above is the detailed content of What are slots (default, named, scoped) in Vue, and how do they enable flexible component composition?. For more information, please follow other related articles on the PHP Chinese website!