Що таке слот у Vue?

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

Слот у Vue - це механізм, який дозволяє передавати розмітку (HTML/шаблон) від батьківського компонента всередину дочірнього компонента.

Простіше кажучи:

Слот - це "отвір" всередині компонента, куди батько може вставити свій контент.

Це робить компоненти гнучкими, придатними для повторного використання і настроюваними.

Простий приклад слота

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

vue

<template>
  <div class="card">
    <slot></slot>
  </div>
</template>

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

vue

<Card>
  <p>Привіт, я текст всередині слота!</p>
</Card>

У підсумку:

<div class="card">
  <p>Привіт, я текст всередині слота!</p>
</div>

Компонент Card просто надає "контейнер", а батько вирішує, що туди вставити.

Для чого потрібні слоти?

Щоб компоненти були гнучкими

Наприклад, компонент <Modal> може не знати заздалегідь, який контент буде всередині.

Щоб передавати HTML, а не тільки дані

Props передають дані. Slots передають шаблон і структуру.

Щоб зробити компоненти повністю придатними для повторного використання

Наприклад, кнопка з іконкою, картка, layout.

Типи слотів

Vue підтримує три типи слотів.

1. Звичайний (default) слот

vue

<slot></slot>

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

Дозволяють мати кілька зон для вставки контенту.

Дочірній:

vue

<slot name="header"></slot>
<slot></slot> <!-- default -->
<slot name="footer"></slot>

Батько:

vue

<Card>
  <template #header>
    <h1>Заголовок</h1>
  </template>

  Основний текст

  <template #footer>
    <button>OK</button>
  </template>
</Card>

3. Scoped slots (слоти з даними)

Дозволяють передавати дані з дочірнього в батьківський через слот.

Дочірній:

vue

<slot :user="user"></slot>

Батько:

vue

<Child v-slot="{ user }">
  <p>{{ user.name }}</p>
</Child>

Відмінність слотів від props

Props	Slots
передають дані	передають розмітку
батько передає значення	батько передає HTML/компоненти
статична структура	гнучка структура
компонент знає, куди розміщувати дані	компонент не знає, що буде всередині

Підсумок (ідеально для співбесіди)

Слот у Vue - це спеціальне місце в компоненті, куди можна вставити кастомний контент від батька. Слоти роблять компонент гнучким і дозволяють повторно використовувати розмітку. Бувають звичайні, іменовані і scoped слоти.

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

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

Premium

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