სლოტები საშუძლებას აძლევს მშობელი კომპონენტს გადასცეს შაბლონის შინაარსი შვილი კომპონენტზე — ეს არის მოქნილი, განმეორებადი обертки (ბარათები, მოდალური ფანჯრები, განლაგება) შექმნის გზა, სადაც მომხმარებელი აკონტროლებს შიდა მარკაპს.
<!-- 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>
შვილი კომპონენტი განსაზღვრავს "ხვრელს" (<slot>); მშობელი ავსებს მას თუ რა მარკაპი სურს. ეს გораздо უფრო მოქნილია, ვიდრე სტრიქონების გადაცემა prop-ების მეშვეობით.
<!-- 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>
ზოგჯერ შვილი კომპონენტს აქვს მონაცემი, რომელიც მშობელი სლოტს სჭირდება (მაგალითად, თითოეული ელემენტი სიაში). სკოპირებული სლოტები აჩენენ მონაცემებს შვილიდან მშობელი შაბლონზე:
<!-- 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>
სკოპირებული სლოტები არის გასაღები renderless/headless კომპონენტებისთვის: შვილი კითხულობს ლოგიკას (მოხვევა, სიტყვების გამოთხოვნა, სტატუსი) და აძლევს მშობელს სრულად აკონტროლოს პრეზენტაცია.
სლოტები არის Vue-ის შინაარსის დისტრიბუციის მექანიზმი — აუცილებელი განმეორებადი განლაგების და wrapper კომპონენტებისთვის.
დასახელებული სლოტები უზრუნველყოფენ მრავალ ჩასმის წერტილს, ხოლო სკოპირებული სლოტები (შვილი მონაცემების ამჟღავნება მშობელ შაბლონებზე) ხელი შეუწყობენ ძლევამტკიცე ნიმუშებს, როგორიცაა headless კომპონენტები და კასტომიზაციის სასაკუთრო სიები/ცხრილები.
ისინი ის, რაც Vue კომპონენტებს შედგენილს ხდის და არა ხისტებს.