Слоты в Vue: полное руководство
Слоты — это механизм Vue для вставки HTML-контента из родительского компонента в дочерний. Они позволяют создавать переиспользуемые компоненты с изменяемыми частями интерфейса: простые, именованные и скоупированные слоты покрывают большинство сценариев. Используйте props для передачи данных, а слоты — для передачи шаблонного содержимого; сочетайте их для гибкости и ясности.
Что такое слоты?
Слот — это «заполнитель» в шаблоне дочернего компонента, который Vue заменяет содержимым, переданным из родительского компонента. В отличие от props (которые передают данные и функции), слоты передают фрагменты шаблона/разметку. Это удобно для создания компонентов-контейнеров — карточек, модальных окон, таблиц и т. п., где структура повторяется, а содержимое меняется.
Важно: слоты передают шаблонный контент, а не только примитивные значения. Для передачи данных из дочернего компонента в шаблон, используйте скоупированные слоты.
Базовый синтаксис слотов
В дочернем компоненте определите место для слота с помощью тега
В родительском компоненте можно поместить любой HTML между открывающим и закрывающим тегом дочернего компонента — этот HTML попадёт в слот:
Это содержимое для слота
Другой контент родителя
Преимущество: дочерний компонент определяет обёртку/каркас, а родитель заполняет содержимое.
Именованные слоты
Если в компоненте несколько участков для вставки, используйте именованные слоты. В дочернем компоненте укажите name у тега slot:
В родителе передаёте содержимое в конкретный слот через директиву v-slot на теге :
Заголовок карточки
Тело карточки. Здесь могут быть несколько абзацев и любая HTML-разметка.
Сокращённая запись для v-slot — символ # (шаблонный синтаксис):
Заголовок карточки
Содержимое по умолчанию
Слот может содержать «запасной» контент — он отобразится, если родитель ничего не передаст:
Здесь отображается содержимое по умолчанию.
Это удобно, чтобы компонент выглядел корректно «out of the box» без обязательного контента.
Скоупированные слоты (Scoped slots)
Скоупированный слот позволяет дочернему компоненту передать данные в шаблон, который выполняется в контексте родителя. По сути, это обратный поток данных для слотов.
Пример дочернего компонента, который экспортирует данные через слот:
В родителе вы можете получить эти данные через единственный аргумент слота или через именованные объекты:
{{ slotProps.value }} is {{ slotProps.age }} years old.
Или для именованных слотов:
{{ titleProps.title }}
{{ bodyProps.body }}
Когда внутри слота вы используете переданные данные, Vue отрендерит шаблон родителя с этими значениями.
Комбинация props и слотов
Частая и полезная практика — передавать данные через props (для конфигурации компонента) и шаблонный контент через слоты. Пример: компонент-таблица получает массив через props, но позволяет кастомизировать ячейку через слот.
Когда слоты не подходят — контрпримеры
- Если нужно просто передать данные (строку, число, объект) — используйте props.
- Для коммуникации «вверх» лучше подходят события (emits) или возвращаемые значения composables.
- Для глубокого обмена данными между далёкими компонентами удобнее provide/inject или глобальный store (Pinia/Vuex).
Использование слотов заместо props усложняет API компонента и делает автодокументацию и тестирование более трудоёмкими.
Альтернативные подходы и комбинации
- Props: явные входные параметры, хороши для простых значений и конфигурации.
- Emits / Custom events: отправка сигналов вверх по иерархии.
- Provide / Inject: делегированная передача данных вниз по дереву без прокидывания через каждый компонент.
- Композиционные API (composables): переиспользуемая логика между компонентами.
- Render functions / JSX: для динамической генерации структуры, когда слоты неудобны.
Выбор зависит от семантики: слоты для шаблонного содержимого, props для данных, events для сигналов.
Лучшие практики
- Предоставляйте содержимое по умолчанию, чтобы компонент был отзывчивым без обязательных слотов.
- Документируйте доступные пропсы слота (имена полей, типы), особенно для скоупированных слотов.
- Не передавайте бизнес-логику через слоты — держите слоты для разметки и отображения.
- Используйте именованные слоты для понятного API, особенно при большом количестве областей.
- Отдавайте предпочтение коротким и понятным именам слотов (title, header, footer, item).
Короткий чеклист для разработчика:
- Есть ли необходимость передавать HTML/шаблон из родителя? Если нет — не используйте слот.
- Не получится ли проще с props + computed? Если да — выберите props.
- Документированы ли имена и поля скоупированных слотов?
- Есть ли содержимое по умолчанию?
Типичные ошибки и отладка
- Ошибка: v-slot не прикреплён к или к правильному тегу. В Vue директиву v-slot обычно применяют на или непосредственно на теге компонента.
- Ошибка: неправильные имена слотов. Убедитесь, что name в
совпадает с селектором в v-slot. - Ошибка: ожидание реактивности свойства, которое не было опубликовано (ref/reactive не возвращены). Проверьте, что передаваемые поля действительно реактивны.
Полезный метод отладки: в slot-контенте временно рендерьте все переданные поля через JSON:
{{ JSON.stringify(p, null, 2) }}
Совместимость Vue 2 vs Vue 3 и миграция
- Vue 2: использовалась форма scopedSlots и синтаксис slot-scope. В Vue 2.6 появился синтаксический сахар v-slot.
- Vue 3: v-slot — стандарт. Рекомендуется использовать современный синтаксис v-slot/# и script setup для компактности.
При миграции замените slot-scope на v-slot и проверьте работу именованных и скоупированных слотов.
Доступность и производительность
- Слоты сами по себе не влияют на доступность, но контент, который вы вставляете, должен быть доступным (арии, фокусируемые элементы и т. д.).
- Производительность: слоты добавляют незначительную абстракцию на уровне шаблона. Не рендерьте огромные динамические структуры в слотах без виртуализации.
Важно: избегайте тяжёлых вычислений в шаблоне слота; используйте computed в родительских компонентах.
Мини-методология: как выбрать структуру слотов
- Определите, какие части компонента статичны, а какие должны быть заменяемы.
- Для одной заменяемой области оставьте default slot.
- Для нескольких областей используйте именованные слоты.
- Если дочерний компонент должен передать данные в шаблон родителя, используйте скоупированные слоты.
- Документируйте API слотов и добавьте содержимое по умолчанию.
Mermaid-диаграмма принятия решения:
flowchart TD
A[Нужно ли передавать шаблонный HTML?] -->|Нет| B[Использовать props]
A -->|Да| C[Требуется несколько областей?]
C -->|Нет| D[Использовать default slot]
C -->|Да| E[Использовать именованные слоты]
E --> F[Нужно ли передавать данные из дочернего в родителя?]
F -->|Да| G[Использовать скоупированные слоты]
F -->|Нет| H[Обычные именованные слоты]Ролевые чеклисты
Для разработчика:
- Убедиться, что API компонента стабилен.
- Прописать все имена слотов и их контракты.
- Добавить примеры использования в документацию.
Для дизайнера:
- Предоставить варианты содержимого для разных слотов.
- Проверить визуальную согласованность при разной длине контента.
Краткий словарь
- Slot — заполнитель шаблона в дочернем компоненте.
- Named slot — именованный слот (name).
- Scoped slot — слот, который предоставляет данные дочернего компонента в шаблон родителя.
- v-slot — директива для привязки содержимого к слоту.
Примеры: шпаргалка (cheat sheet)
- Default slot:
- Named slot:
- Using named slot: … или …
- Scoped slot props:
и {{ p.item }}
Критерии приёмки
- Компонент корректно рендерит содержимое по умолчанию при отсутствии переданных слотов.
- Именованные слоты принимают и отображают соответствующий контент.
- Скоупированные слоты передают ожидаемые поля и документация описывает их типы.
- Нет утечек логики между компонентами: слоты используются для разметки, props — для данных.
Сводка
Слоты — мощный инструмент для создания гибких и переиспользуемых Vue-компонентов. Используйте default-слоты для единственной вставляемой области, именованные — для множества областей и скоупированные слоты для передачи данных из дочернего компонента в родительский шаблон. Всегда документируйте API слотов и сочетайте их с props и emits для ясного и предсказуемого поведения компонентов.
Важно: слоты — не панацея. Выберите их, когда требуется передать шаблонный контент; в остальных случаях отдавайте предпочтение props, events и provide/inject.
Примечание: примеры подходят для Vue 3; при миграции из Vue 2 проверьте синтаксис v-slot и slot-scope.
Похожие материалы
Отдельный раздел данных для Windows
Intl API в JavaScript — форматирование по локали
Stacks в Apple Fitness+: создать и управлять
Почему прозрачные чехлы желтеют и как этого избежать
Создать логотип в Photoshop — пошагово
