Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чи можна використовувати кілька слотів в одному компоненті?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Так**, в одному компоненті можна використовувати кілька слотів - для цього використовуються іменовані слоти з атрибутом name. **Ключове:** Vue не обмежує кількість слотів, головне, щоб кожен мав унікальне ім'я, а батько заповнював його відповідним #slotName.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняТак, **в одному компоненті можна використовувати кілька слотів** - і це стандартна практика у Vue. Для цього використовуються **іменовані слоти**. --- ## Як працює кілька слотів? У дочірньому компоненті ви оголошуєте кілька `<slot>` з атрибутом **name**: #### Дочірній компонент (Card.vue) ```vue <template> <div class="card"> <header class="card-header"> <slot name="header"></slot> </header> <div class="card-body"> <slot></slot> <!-- default слот --> </div> <footer class="card-footer"> <slot name="footer"></slot> </footer> </div> </template> ``` --- ## Батьківський компонент може заповнити кожен слот #### Батько ```vue <Card> <template #header> <h2>Заголовок</h2> </template> <p>Основний текст картки</p> <!-- Default слот --> <template #footer> <button>OK</button> </template> </Card> ``` --- ## Підсумковий результат: - у `header` потрапляє `<h2>Заголовок</h2>` - у default слот - `<p>Основний текст...</p>` - у `footer` - кнопка --- ## Так, можна мати скільки завгодно слотів - 2 слоти - 5 слотів - 10 слотів Vue не обмежує кількість, головне - щоб: - кожен іменований слот мав унікальне ім'я - батько використовував відповідний `#slotName`Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.