Как ответить
Слоты — это механизм Vue.js, который позволяет передавать HTML-шаблоны из родительского компонента в дочерний. По сути, это «дырки» в шаблоне дочернего компонента, которые заполняются контентом при использовании компонента. Без слотов дочерний компонент жёстко задаёт свою разметку, а со слотами родитель может влиять на то, что рендерится внутри.
Самый простой пример — базовый слот. В дочернем компоненте пишем <slot></slot>, а в родителе передаём контент между тегами компонента:
<!-- Child.vue -->
<div class="card">
<slot />
</div>
<!-- Parent.vue -->
<Child>
<p>Этот текст попадёт в слот</p>
</Child>Если нужно несколько слотов, используются именованные. У слота указывается атрибут name, а в родителе — <template v-slot:header> (или сокращённо #header):
<!-- Modal.vue -->
<div class="modal">
<slot name="header" />
<slot name="body" />
<slot name="footer" />
</div>
<!-- Usage -->
<Modal>
<template #header><h2>Заголовок</h2></template>
<template #body><p>Текст</p></template>
<template #footer><button>Закрыть</button></template>
</Modal>Более продвинутый вариант — scoped slots (слоты с областью видимости). Они позволяют дочернему компоненту передавать данные обратно в родительский шаблон через slot props. Например, компонент списка может передавать каждый элемент, а родитель решает, как его отобразить:
<!-- List.vue -->
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item">
{{ item.text }} <!-- fallback -->
</slot>
</li>
</ul>
<!-- Parent.vue -->
<List :items="items">
<template #default="{ item }">
<strong>{{ item.text }}</strong> ({{ item.id }})
</template>
</List>Scoped slots часто используются в библиотеках компонентов (например, Vuetify, Element UI) для кастомизации таблиц, списков, дропдаунов. Для junior важно понимать: слоты — это способ сделать компонент гибким без передачи пропсов-функций или сложных конфигов. Они работают на уровне шаблонов, а не данных.
Ещё стоит упомянуть, что слоты могут иметь fallback-контент — то, что рендерится, если родитель ничего не передал. И что v-slot можно использовать только на <template> или на самом компоненте (если слот единственный).