{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Компонент-обёртка (wrapper component)"},{"type":"text","text":" — это компонент, который "},{"type":"text","marks":[{"type":"italic"}],"text":"не содержит собственной бизнес-логики или функционала"},{"type":"text","text":", а "},{"type":"text","marks":[{"type":"bold"}],"text":"служит контейнером, оформлением или структурой"},{"type":"text","text":" для других компонентов/элементов."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Компонент-обёртка — это компонент, который оборачивает дочерний контент (обычно через слоты), добавляет ему разметку, стиль или поведение, но сам не определяет содержимое."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Он больше про "},{"type":"text","marks":[{"type":"bold"}],"text":"структуру"},{"type":"text","text":", чем про собственный контент."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🔥 Простой пример компонента-обёртки"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Wrapper.vue"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n\n\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Использование"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n

Заголовок

Какой-то контент

\n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент просто добавляет стиль/структуру, но не знает, что внутри."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🎯 Зачем нужны компоненты-обёртки?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это важный вопрос для собеседования."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Создание переиспользуемых Layout-компонентов"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Card"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Container"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Modal"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"PageLayout"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"SidebarLayout"}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Они определяют структуру, а контент задаёт родитель."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Визуальное оформление без изменения логики"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно менять внешний вид компонента без изменения его контента."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Инкапсуляция повторяющейся разметки"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если одна и та же структура повторяется много раз, её оборачивают в компонент."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 4. "},{"type":"text","marks":[{"type":"bold"}],"text":"HOC-паттерн (“Higher Order Component”) во Vue"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент-обёртка может:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"расширять поведение детей"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"передавать им данные"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"добавлять обработчики"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"включать логику (например, проверку прав)"}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ 5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Обычный способ реализации Layout'ов в Router"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Например:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n \n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"🧩 Пример сложной обёртки"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Modal.vue"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Это чистая обёртка, структура + стили."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Родитель:"}]},{"type":"codeBlock","attrs":{"language":"vue"},"content":[{"type":"text","text":"\n \n\n \n\n \n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":1},"content":[{"type":"text","text":"📌 Отличие компонента-обёртки от обычного компонента"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Обычный компонент"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент-обёртка"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сам содержит контент"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"отображает контент, переданный родителем"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"выполняет логику"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"логика минимальна или отсутствует"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сам определяет UI"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"определяет только "},{"type":"text","marks":[{"type":"italic"}],"text":"структуру"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"italic"}],"text":"контейнер"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"не зависит от слотов"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"обычно использует слоты"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Заголовок

Авторизация

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

Комментарии