Что такое слоты (slots) во Vue и какие они бывают?

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

Виды

• Обычный — одна область по умолчанию.
• Именованные — несколько областей: header, footer.
• Scoped — ребёнок передаёт данные наружу, а родитель решает, как их показать.

<!-- Card.vue -->
<template>
  <div class="card">
    <header><slot name="header" /></header>
    <slot />                              <!-- по умолчанию -->
    <ul>
      <li v-for="item in items" :key="item.id">
        <slot name="item" :item="item">{{ item.title }}</slot> <!-- scoped + значение по умолчанию -->
      </li>
    </ul>
  </div>
</template>

<!-- Использование -->
<Card :items="posts">
  <template #header>Заголовок</template>
  Основной контент
  <template #item="{ item }"><b>{{ item.title }}</b></template>
</Card>

Зачем

Слоты делают компоненты гибкими: таблицы, списки и карточки не знают, как отображать содержимое, и отдают это решение родителю.

Коротко для собеседования

Слоты — композиция разметки. Именованные делят компонент на зоны, scoped передают данные назад в родительский шаблон.