Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке слот у Vue?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Слот у Vue** - це механізм, який дозволяє передавати розмітку (HTML/шаблон) від батьківського компонента всередину дочірнього. **Ключове:** слот - це "отвір" всередині компонента, куди батько може вставити свій контент, що робить компоненти гнучкими і придатними для повторного використання.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Слот у 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 слоти.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.