Sloty umożliwiają rodzicowi przekazywanie zawartości szablonu do komponentu dziecka — to sposób, w jaki buduje się elastyczne, wielokrotnie używalne wrappery (karty, modale, układy), gdzie konsument kontroluje wewnętrzny markup.
<!-- Card.vue -->
<template>
<div class="card">
<slot></slot> <!-- parent's content is injected here -->
</div>
</template>
<!-- parent -->
<Card>
<h2>Title</h2> <!-- this markup fills the slot -->
<p>Any content!</p>
</Card>
Komponent dziecka definiuje "dziurę" (<slot>); rodzic wypełnia ją dowolnym markupem. To jest znacznie bardziej elastyczne niż przekazywanie stringów przez props.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main> <!-- the default slot -->
<footer><slot name="footer"></slot></footer>
</template>
<!-- parent uses #name (shorthand for v-slot:name) -->
<Layout>
<template #header><h1>My App</h1></template>
<p>Main content (default slot)</p>
<template #footer><small>© 2024</small></template>
</Layout>
Czasami komponent dziecka ma dane, których potrzebuje slot rodzica (np. każdy element na liście). Sloty o określonym zakresie ujawniają dane z komponentu dziecka do szablonu rodzica:
<!-- List.vue — exposes each item to the slot -->
<template>
<li v-for="item in items" :key="item.id">
<slot :item="item" :index="index"></slot> <!-- pass data to the slot -->
</li>
</template>
<!-- parent receives the data via v-slot -->
<List :items="users">
<template #default="{ item }">
{{ item.name }} — {{ item.email }} <!-- parent decides how to render each item -->
</template>
</List>
Sloty o określonym zakresie są kluczem do komponentów renderless/headless: komponent dziecka obsługuje logikę (pętlowanie, pobieranie, stan) i pozwala rodzicowi całkowicie kontrolować prezentację.
Sloty to mechanizm dystrybucji zawartości Vue — niezbędny dla komponentów wielokrotnie używalnych i wrapperów.
Sloty nazwane zapewniają wiele punktów wstawiania, a sloty o określonym zakresie (ujawniające dane komponentu dziecka szablonom zdefiniowanym przez rodzica) umożliwiają potężne wzorce, takie jak komponenty headless i customizowalne listy/tabele.
To one czynią komponenty Vue kompozycyjnymi zamiast sztywnych.