Skip to main content

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

VueJunior~1 хв читання
Запропонувати правку

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

Простіше кажучи: Слот - це "місце всередині компонента", куди батько може вставити свою розмітку.

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

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

Компонент Card.vue:

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

Використання:

javascript
<Card> <h1>Hello Vue</h1> <p>This is card content</p> </Card>

Результат: компонент обгортає передану розмітку.

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

  • розмітка всередині компонента може змінюватися
  • компонент стає універсальним
  • можна створювати гнучкі UI-обгортки: Card, Modal, Layout, Table, Tabs
  • це основа просунутих компонентних патернів

Типи слотів

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

javascript
<slot></slot>

Використовується, коли у компонента просто одне місце для вмісту.

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

Якщо потрібно кілька різних областей всередині компонента.

Компонент Modal.vue:

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

Використання:

javascript
<Modal> <template #header> <h1>Title</h1> </template> Modal content <template #footer> <button>OK</button> </template> </Modal>

3) Скоуп-слоти (scoped)

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

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

javascript
<template> <slot :user="user"></slot> </template> <script setup> const user = { name: 'Tim', age: 28 } </script>

Батько:

javascript
<MyComponent> <template #default="{ user }"> <p>{{ user.name }} - {{ user.age }}</p> </template> </MyComponent>

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

Що можна передати в слот?

  • HTML
  • текст
  • будь-які Vue-компоненти
  • складні шаблони
  • реактивні дані (у scoped-слотах)

Де часто використовують слоти?

  • Layout (<Header /><Sidebar />)
  • Картки (<Card>...</Card>)
  • Модальні вікна
  • Таблиці, списки
  • Компоненти-обгортки
  • Випадні списки
  • Dropdown/Popover/Menu
  • Tabs
  • Form builder - динамічні форми

Приклад реального компонента Card зі слотом

javascript
<template> <div class="card"> <slot /> </div> </template> <style scoped> .card { padding: 20px; background: white; border-radius: 8px; } </style>

Використання:

javascript
<Card> <h2>Product Name</h2> <p>Description...</p> </Card>

Підсумок (шпаргалка)

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

Види слотів:

  • Звичайний
  • Іменований
  • Scoped (слот з даними)

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

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

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

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

Запропонувати правку