0Pricing
Vue Academy · Lesson

Named Slots and Default Slot

Multiple , , shorthand #name syntax.

What Slots Are

Slots let a parent pass markup into a child component. The child decides where that content appears using the <slot> element. This is Vue content distribution.

The Default Slot

A <slot> with no name is the default slot. Whatever the parent puts between the component tags lands there.

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

All lessons in this course

  1. Named Slots and Default Slot
  2. Scoped Slots: Passing Data to Parent
  3. Dynamic Slot Names
  4. Slot Fallback Content and Checking Slots
← Back to Vue Academy