Що таке Slot у Vue.js?

VueMiddle~1 хв читання

Slot (слот) - це механізм передачі контенту від батьківського компонента в дочірній. Він дозволяє робити компоненти гнучкими та придатними до повторного використання, дозволяючи батьку вставляти власну розмітку всередину дочірнього компонента.

1. Приклад: базовий слот

Дочірній компонент (`BaseCard.vue`)

javascript

<template>
  <div class="card">
    <slot></slot> <!-- місце для вмісту -->
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 6px;
}
</style>

Батьківський компонент

javascript

<template>
  <BaseCard>
    <h2>Заголовок картки</h2>
    <p>Вміст картки.</p>
  </BaseCard>
</template>

<script setup>
import BaseCard from './BaseCard.vue'
</script>

Усе, що знаходиться всередині <BaseCard>...</BaseCard>, вставиться в місце, де дочірній компонент вказав <slot>.

2. Іменовані слоти

Іноді потрібно декілька різних зон вставки (наприклад, заголовок і контент). Тоді слоти можна іменувати за допомогою name.

Дочірній компонент:

javascript

<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

Батько:

javascript

<BaseCard>
  <template #header>
    <h2>Заголовок</h2>
  </template>

  <p>Основний контент картки</p>

  <template #footer>
    <small>Підвал картки</small>
  </template>
</BaseCard>

<slot></slot> без імені - це дефолтний слот
<slot name="..."> - іменовані слоти
Батько використовує синтаксис #ім'я (або v-slot:ім'я)

3. Слот з даними (scoped slot)

Іноді дочірній компонент хоче передати дані назад батьку в слот. Для цього слот може містити "область видимості" (scope) - спеціальні змінні.

Дочірній компонент:

javascript

<template>
  <ul>
    <slot v-for="item in items" :item="item" :key="item.id"></slot>
  </ul>
</template>

<script setup>
defineProps({ items: Array })
</script>

Батько:

javascript

<ItemList :items="users">
  <template #default="{ item }">
    <li>{{ item.name }} - {{ item.email }}</li>
  </template>
</ItemList>

<script setup>
const users = [
  { id: 1, name: 'Oleh', email: 'oleh@example.com' },
  { id: 2, name: 'Bohdan', email: 'bohdan@example.com' }
]
</script>

Дочірній компонент "експортує" дані (:item="item")
Батько "деструктурує" їх через { item } Це називається scoped slot (слот з областю видимості).

4. Навіщо потрібні слоти

Роблять компоненти гнучкими та універсальними
Дозволяють вставляти кастомний HTML у шаблон компонента
Підтримують динамічні та реактивні дані
Спрощують реалізацію UI-компонентів (layout, modal, card, table тощо)

javascript

<!-- Modal.vue -->
<template>
  <div v-if="open" class="modal">
    <div class="content">
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({ open: Boolean })
</script>

javascript

<!-- Батьківський компонент -->
<Modal :open="true">
  <template #header><h2>Підтвердження</h2></template>
  <p>Ви впевнені, що хочете видалити?</p>
  <template #footer>
    <button>Скасувати</button>
    <button>OK</button>
  </template>
</Modal>

Підсумок

Slot - це місце-заповнювач у шаблоні компонента, куди батько може вставити власний контент.

Існує три типи:

Звичайний (default) - <slot></slot>

Іменований (named) - <slot name="header">

З областю видимості (scoped) - <slot :data="...">

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.