Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке компонент-обгортка (wrapper component)?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Компонент-обгортка (wrapper component)** - це компонент, який не містить власної бізнес-логіки чи функціоналу, а слугує контейнером, оформленням або структурою для інших компонентів. **Ключове:** він більше про структуру, ніж про власний контент, і зазвичай передає дочірній контент через слоти.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Компонент-обгортка (wrapper component)** - це компонент, який *не містить власної бізнес-логіки чи функціоналу*, а **слугує контейнером, оформленням або структурою** для інших компонентів/елементів. Простіше кажучи: > **Компонент-обгортка - це компонент, який обгортає дочірній контент (зазвичай через слоти), додає йому розмітку, стиль або поведінку, але сам не визначає вміст.** Він більше про **структуру**, ніж про власний контент. --- ## Простий приклад компонента-обгортки #### Wrapper.vue ```vue <template> <div class="wrapper"> <slot></slot> <!-- сюди потрапляє переданий контент --> </div> </template> <style> .wrapper { padding: 20px; border: 1px solid #ccc; } </style> ``` #### Використання ```vue <Wrapper> <h1>Заголовок</h1> <p>Якийсь контент</p> </Wrapper> ``` Компонент просто додає стиль/структуру, але не знає, що всередині. --- ## Навіщо потрібні компоненти-обгортки? Це важливе питання для співбесіди. --- ### 1. Створення придатних для повторного використання Layout-компонентів Наприклад: - Card - Container - Modal - PageLayout - SidebarLayout Вони визначають структуру, а вміст задає батько. --- ### 2. Візуальне оформлення без зміни логіки Можна змінювати зовнішній вигляд компонента без зміни його вмісту. --- ### 3. Інкапсуляція розмітки, що повторюється Якщо та сама структура повторюється багато разів, її обгортають у компонент. Наприклад: ```vue <Card> <UserInfo /> </Card> ``` --- ### 4. HOC-патерн ("Higher Order Component") у Vue Компонент-обгортка може: - розширювати поведінку дітей - передавати їм дані - додавати обробники - включати логіку (наприклад, перевірку прав) --- ### 5. Звичайний спосіб реалізації Layout у Router Наприклад: ```vue <AdminLayout> <router-view /> </AdminLayout> ``` --- ## Приклад складної обгортки #### Modal.vue ```vue <template> <div class="overlay" @click="close"> <div class="modal" @click.stop> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </div> </template> ``` Це чиста обгортка, структура + стилі. Батько: ```vue <Modal> <template #header> <h2>Авторизація</h2> </template> <LoginForm /> <template #footer> <button @click="close">Закрити</button> </template> </Modal> ``` --- ## Відмінність компонента-обгортки від звичайного компонента | Звичайний компонент | Компонент-обгортка | |---|---| | сам містить контент | відображає контент, переданий батьком | | виконує логіку | логіка мінімальна або відсутня | | сам визначає UI | визначає лише *структуру* і *контейнер* | | не залежить від слотів | зазвичай використовує слоти |Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.