The default slot is used to insert a single content. The content passed by the parent component will be directly filled in the position of the child component; 2. The named slot implements multiple insertion points through the name attribute and the v-slot directive, so that the content can be inserted into different areas of the child component; 3. The scope slot allows the child component to pass data to the parent component through the slot prop. The parent component can custom render content based on this data, thereby achieving logical separation from display. Slots are the core mechanism in Vue to implement content distribution and flexible reuse of components.

Slots in Vue are a powerful feature that let you compose components by injecting content into them from the parent. Think of them as placeholders in a child component that can be filled with markup or content defined in the parent.

They're especially useful when building reusable UI components like modals, cards, or layout wrappers — where the structure is consistent, but the content inside may vary.

1. Default Slots (Single Slot)

The simplest form of a slot is the default slot . You place <slot></slot> in the child component, and any content passed by the parent will go there.

Child Component (ButtonWrapper.vue):

 <template>
  <button class="wrapper">
    <slot></slot>
  </button>
</template>

Parent Component:

 <template>
  <ButtonWrapper>Click me</ButtonWrapper>
</template>

Results:

 <button class="wrapper">Click me</button>

If no content is passed, the slot remains empty — or you can provide fallback content inside the slot.

 <slot>Default text</slot>

2. Named Slots

Sometimes you need multiple insertion points. That's where named slots come in.

You give slots a name using the name attribute, and pass content using the v-slot directive (or # shorthand).

Child Component (Layout.vue):

 <template>
  <div class="layout">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot> <!-- default slot -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

Parent Component:

 <template>
  <Layout>
    <template v-slot:header>
      <h1>Page Title</h1>
    </template>

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

    <template #footer> <!-- # is shorthand for v-slot -->
      <small>Copyright 2025</small>
    </template>
  </Layout>
</template>

Now content is slotted into the correct areas based on name.

3. Scoped Slots (Passing Data to Parent)

Scoped slots allow the child component to pass data back to the parent so the parent can control how that data is rendered.

This is useful for components like lists or dropdowns where the child handles logic, but the parent controls presentation.

Child Component (UserList.vue):

 <template>
  <ul>
    <li v-for="user in users" :key="user.id">
      <slot :user="user" :showEmail="true"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 1, name: &#39;Alice&#39;, email: &#39;alice@example.com&#39; },
        { id: 2, name: &#39;Bob&#39;, email: &#39;bob@example.com&#39; }
      ]
    }
  }
}
</script>

Parent Component:

 <template>
  <UserList v-slot="{ user, showEmail }">
    <span>{{ user.name }}</span>
    <span v-if="showEmail"> - {{ user.email }}</span>
  </UserList>
</template>

Here, the child passes user and showEmail to the parent via the slot. The parent uses destructuring syntax in v-slot to access them.

? Note: Scoped slots are often used in advanced component patterns like renderless components or flexible list renderers.

Key Points to Remember

• Default slot : One unnamed <slot></slot> for general content.
• Named slots : Use name="x" and v-slot:x to target specific areas.
• Scoped slots : Pass data from child to parent via slot props.
• v-slot shorthand : #header instead of v-slot:header .
• Fallback content : Add content inside <slot></slot> as default.
• Multiple named slots : Can be used together with the default.

Slots make Vue components more flexible and truly reusable — instead of hardcoding content, you design components as templates with customized parts.

Basically, slots = content distribution in Vue. And once you get used to them, you'll use them everywhere.

The above is the detailed content of What are slots in Vue?. For more information, please follow other related articles on the PHP Chinese website!