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