They allow passing content into components.

A slot with a specific name for structured content.

It allows passing data from child to slot content.

Vue Slots - Learn VUEJS | Revochamp

Name: Vue Slots
Availability: InStock
Author: Revochamp

What are Slots?

Slots allow you to pass content from a parent component into a child component, enabling flexible and reusable component layouts.

Default Slot

HTMLRead-only

<!-- Child -->
<div>
  <slot></slot>
</div>

<!-- Parent -->
<my-component>
  <p>Hello Slot</p>
</my-component>

<!-- Child -->
<div>
  <slot></slot>
</div>

<!-- Parent -->
<my-component>
  <p>Hello Slot</p>
</my-component>

Named Slots

HTMLRead-only

<!-- Child -->
<header><slot name="header"></slot></header>
<main><slot></slot></main>

<!-- Parent -->
<my-component>
  <template v-slot:header>
    <h1>Title</h1>
  </template>
  <p>Content</p>
</my-component>

<!-- Child -->
<header><slot name="header"></slot></header>
<main><slot></slot></main>

<!-- Parent -->
<my-component>
  <template v-slot:header>
    <h1>Title</h1>
  </template>
  <p>Content</p>
</my-component>

Scoped Slots

Scoped slots allow child components to pass data to slot content.

HTMLRead-only

<!-- Child -->
<slot :user="user"></slot>

<!-- Parent -->
<my-component v-slot="slotProps">
  {{ slotProps.user.name }}
</my-component>

<!-- Child -->
<slot :user="user"></slot>

<!-- Parent -->
<my-component v-slot="slotProps">
  {{ slotProps.user.name }}
</my-component>

Shorthand Syntax

HTMLRead-only

<template #header>
  <h1>Header</h1>
</template>

<template #header>
  <h1>Header</h1>
</template>

Fallback Content

HTMLRead-only

<slot>Default Content</slot>

<slot>Default Content</slot>

Best Practices

Use slots for flexible layouts
Use named slots for complex UI
Keep slot structure simple
Use scoped slots for dynamic data sharing

Common Mistakes

Overusing slots unnecessarily
Not using named slots properly
Confusing scoped slots syntax
Making components too complex

Conclusion

Slots provide a powerful way to create flexible and reusable Vue components by allowing dynamic content insertion.

<header><slot name="header"></slot></header> <main><slot></slot></main>  <my-component> <template v-slot:header> <h1>Title</h1> </template> <p>Content</p> </my-component>

Vue Slots

Vue Slots

What are Slots?

Default Slot

Named Slots

Scoped Slots

Shorthand Syntax

Fallback Content

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?

Vue Slots

Vue Slots

What are Slots?

Default Slot

Named Slots

Scoped Slots

Shorthand Syntax

Fallback Content

Best Practices

Common Mistakes

Conclusion

Try it yourself

Test Your Knowledge

Frequently Asked Questions

Need help?