Що таке слоти у Vue?
Слоти — це механізм для передачі контенту від батьківського компонент до дочірнього плейсхолдеру всередині шаблону. Завдяки їм ви створюєте гнучкі та багаторазові компоненти, дозволяючи батьківському компоненту вставляти довільний контент у заздалегідь визначені області дочірнього компонент.
Типи слотів
- За замовчуванням — базовий слот без імені.
- Іменовані слоти — іменовані слоти, де кожне місце слота має своє ім'я.
- Скоуповані слоти — слоти, які передають дані з дочірнього компонент назад до батьківського через об'єкт slot props.
Слот за замовчуванням
html
<!-- ChildComponent.vue -->
<template>
<div class="wrapper">
<slot />
</div>
</template>html
<!-- Parent.vue -->
<ChildComponent>
<p>Привіт з батьківського компонент!</p>
</ChildComponent>Іменовані слоти
html
<!-- Layout.vue -->
<template>
<header><slot name="header" /></header>
<main><slot /></main>
<footer><slot name="footer" /></footer>
</template>html
<!-- Використання -->
<Layout>
<template #header>
<h1>Заголовок сторінки</h1>
</template>
<p>Основний контент сторінки</p>
<template #footer>
<p>© 2025</p>
</template>
</Layout>Скоуповані слоти
html
<!-- List.vue -->
<template>
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item" />
</li>
</ul>
</template>
<script>
export default {
props: {
items: Array
}
};
</script>html
<!-- Parent.vue -->
<List :items="users">
<template #default="{ item }">
<strong>{{ item.name }}</strong> — {{ item.age }} років
</template>
</List>Не змінюйте slot props:
slot props об'єкт доступний лише для читання в шаблоні батьківського компонент.
Більше інформації в офіційній документації Vue: Документація Vue: Слоти
Контент
Типи слотівСлот за замовчуваннямІменовані слотиСкоуповані слоти
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.