Що таке компонент-обгортка (wrapper component)?

VueJunior~1 хв читання

Компонент-обгортка (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	визначає лише структуру і контейнер
не залежить від слотів	зазвичай використовує слоти

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.