Slots

Slots

Props pass data. Slots pass template content. They let a parent component inject HTML into a child component's template, making components more flexible and reusable.

Basic Slot

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

<!-- Parent -->
<Card>
    <h2>My Card Title</h2>
    <p>Some content inside the card.</p>
</Card>

Everything between <Card> and </Card> is inserted where <slot> appears. The parent controls the content; the child controls the wrapper.

Default Slot Content

<slot>Default content shown if parent provides nothing</slot>

Named Slots

<!-- Child: Layout.vue -->
<template>
    <div class="layout">
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><slot name="footer"></slot></footer>
    </div>
</template>

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

    <p>Main content goes here (default slot)</p>

    <template v-slot:footer>
        <p>Footer content</p>
    </template>
</Layout>

Key Takeaways

• <slot> lets parents inject template content into child components
• Named slots (<slot name="header">) allow multiple content sections
• Default content renders when the parent does not provide slot content
• Slots make components flexible — the child provides structure, the parent provides content