Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке Slot у Vue.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Slot (слот)** - це механізм передачі контенту від батьківського компонента в дочірній. **Ключове:** він дозволяє робити компоненти гнучкими та придатними до повторного використання, даючи батьку змогу вставляти власну розмітку всередину дочірнього компонента.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**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 тощо) --- ## 5. Приклад: компонент `Modal` ```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** - це місце-заповнювач у шаблоні компонента, > куди батько може вставити власний контент. > > Існує три типи: > > 1. **Звичайний (default)** - `<slot></slot>` > 2. **Іменований (named)** - `<slot name="header">` > 3. **З областю видимості (scoped)** - `<slot :data="...">`Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.