Что такое слоты и scoped slots?

Смысл

Slots позволяют родителю подставить разметку внутрь дочернего компонента — как «дыры» для контента. Scoped slots дополнительно передают данные ребёнка родителю, чтобы родитель решил, как отрисовать эти данные.

Обычный слот

<!-- Card.vue -->
<div class="card">
  <slot>Заглушка</slot>
</div>

<!-- Parent -->
<Card>
  <p>Контент от родителя</p>
</Card>

Именованные слоты: <slot name="header">, снаружи #header или v-slot:header. Fallback-контент внутри <slot> показывается, если родитель ничего не передал.

Scoped slot

<!-- List.vue -->
<ul>
  <li v-for="item in items" :key="item.id">
    <slot name="row" :item="item" />
  </li>
</ul>

<!-- Parent -->
<List :items="items" v-slot:row="{ item }">
  <strong>{{ item.title }}</strong>
</List>

Ребёнок владеет данными списка, родитель — представлением строки. Так устроены гибкие таблицы и design-system компоненты. В Vue 3 сокращение #default="{ item }". Не путайте слот с prop: слот передаёт VNodes/разметку, а не только строки.

Scoped slot — основа паттерна «headless» UI: логика внутри ребёнка, внешний вид полностью снаружи.

Итог

Slot = контент от родителя; scoped slot = контент + данные из ребёнка. Базовый паттерн гибкой композиции UI.