Что такое слоты

Слот нужен, когда компонент не должен знать заранее всю разметку внутри себя. Он задает каркас, поведение и стили контейнера, а родитель передает содержимое.

Простой пример:

<!-- BaseCard.vue -->
<template>
  <article class="card">
    <slot>Нет содержимого</slot>
  </article>
</template>

<!-- Parent.vue -->
<BaseCard>
  <h2>Профиль</h2>
  <p>Данные пользователя загружены</p>
</BaseCard>

На интервью не ограничивайтесь словом "разметка". Добавьте практический вывод: слот делает компонент-контейнер переиспользуемым и помогает не передавать HTML через строковые props. Так вы снижаете XSS-риск и оставляете обработчики событий, реактивные данные и компоненты в обычном шаблоне Vue.

В сильном ответе важно показать границу. Если вы передаете значение, состояние или настройку, обычно нужен prop. Если вы передаете фрагмент интерфейса, обычно нужен slot.

Плохой вариант:

<BaseCard :header-html="'<h2>Profile</h2><button>Edit</button>'" />

Так делать не стоит. Строка хуже проверяется, неудобна для реактивности и может стать источником XSS, если ее потом вставить через v-html. Еще вы теряете обычные Vue-события и получаете UI, который сложнее тестировать. Безопаснее отдать родителю named slot.

<BaseCard>
  <template #header>
    <h2>Profile</h2>
    <button>Edit</button>
  </template>

  <p>User data</p>
</BaseCard>

Default slot это основной слот без имени. Он удобен для кнопки, карточки, модального окна или layout-обертки, где есть одно главное содержимое.

Named slots нужны, когда в компоненте есть несколько зон. Например, у карточки могут быть header, default-содержимое и footer.

<!-- BaseCard.vue -->
<template>
  <article class="card">
    <header><slot name="header" /></header>
    <main><slot /></main>
    <footer><slot name="footer" /></footer>
  </article>
</template>

Scoped slot нужен, когда дочерний компонент хочет передать данные наружу в шаблон слота. Например, список управляет итерацией, но родитель выбирает, как рисовать строку.

<!-- UserList.vue -->
<template>
  <ul>
    <li v-for="(user, index) in users" :key="user.id">
      <slot :user="user" :index="index" />
    </li>
  </ul>
</template>

<!-- Parent.vue -->
<UserList :users="users" v-slot="{ user, index }">
  <strong>{{ index + 1 }}. {{ user.name }}</strong>
</UserList>

Здесь UserList контролирует список, ключи и обход, а родитель контролирует внешний вид элемента. Это хороший пример для интервью. Он показывает не только синтаксис, но и разделение ответственности.

Важно не отдавать в slot весь внутренний state списка. Передавайте только стабильные значения, которые входят в публичный контракт. Так родитель не начнет зависеть от деталей реализации, а лишние изменения внутреннего состояния не будут без причины усложнять рендеринг слота.

Слоты особенно полезны в компонентах, которые отвечают за поведение, но не должны навязывать конкретную разметку. Это модалки, dropdown, tabs, table, list, autocomplete, empty state и layout-компоненты.

Но слоты не должны превращать компонент в непонятный конструктор. Если у компонента десять named slots и каждый влияет на состояние, пользоваться им будет трудно. В такой ситуации лучше разделить компонент на меньшие части или оставить часть настроек через props.

Для интерактивных компонентов проверьте доступность контракта. Если слот меняет кнопку открытия dropdown или заголовок модалки, компонент должен сохранять фокус, закрытие с клавиатуры, корректные labels и понятное состояние ошибки. Иначе гибкость слота приведет к красивому, но небезопасному для пользователя UI.

На интервью можно ответить так:

Слоты я использую, когда нужно кастомизировать UI внутри переиспользуемого компонента. Props оставляю для данных и настроек. Если дочерний компонент управляет состоянием, но родитель должен отрисовать часть интерфейса, использую scoped slot и явно передаю только нужные данные.