Слоты в Vue: как передавать содержимое от родителя к дочернему компоненту
Что такое слоты?
Слоты в Vue — это специальные плейсхолдеры внутри шаблона дочернего компонента. Они дают возможность динамически вставлять в компонент произвольное HTML-содержимое, которое определяется в компоненте-родителе.
Кратко: слоты похожи на пропсы, но передают не данные, а шаблон/разметку. Это помогает создавать переиспользуемые компоненты с держателем для различного содержимого.
Important: слот не является заменой логики. Для передачи функций и сложных данных используйте пропсы и события.
Базовый синтаксис слотов
Vue позволяет объявить слот в шаблоне дочернего компонента с помощью тега
Когда родитель использует этот компонент, любое содержимое внутри тега компонента вставится на место
Пример использования в компоненте-родителе:
import ChildComponent from './components/ChildComponent.vue';
This is the child component
This is the parent component
Примечание: в коде выше строки внутри тега ChildComponent будут рендериться вместо
Именованные слоты
Если дочерний компонент содержит несколько областей, используйте именованные слоты. Это полезно для карт, модалок, сложных макетов.
Пример дочернего компонента с двумя слотами “title” и “body”:
Чтобы передать содержимое в именованные слоты, в родителе используйте директиву v-slot, обычно на теге :
import ChildComponent from "./components/ChildComponent.vue";
This is the Card Title
This is the Card Body Content.
It can include multiple paragraphs or any other HTML content.
Шортхенд v-slot — это символ #, поэтому эквивалентно .
Notes: v-slot привязывается к одному тегу. Обычно это , чтобы избежать лишней DOM-обёртки.
Контент по умолчанию
Вы можете определить содержимое по умолчанию внутри тега
Default content for the slot.
Если родитель ничего не вставляет, Vue покажет внутренний HTML как fallback.
Слоты с областями видимости
Слоты с областями видимости (scoped slots) позволяют дочернему компоненту передавать данные в шаблон родителя через объект-параметр. Это похоже на обратную передачу данных: дочерний компонент предоставляет значения, родитель использует их внутри слота.
Пример дочернего компонента, который передаёт value и age:
import { ref } from "vue";
const value = ref("David");
const age = ref(21);
В родителе вы получаете доступ к этим значениям через объект, который вы указываете в v-slot:
import ChildComponent from './components/ChildComponent.vue';
{{ slotProps.value }} is {{ slotProps.age }} years old.
Для именованных слотов аналогично:
import ChildComponent from "./components/ChildComponent.vue";
{{ titleProps.title }}
{{ bodyProps.body }}
В дочернем компоненте вы объявляете, какие значения передаёте в слот, например:
import { ref } from "vue";
const cardTitle = ref("This is the card title.");
const cardBody = ref("This is the card body content.");
Важно: значения, переданные в слот, остаются реактивными. Родитель использует их только для рендеринга внутри шаблона слота.
Когда слоты не подходят
- Если требуется организовать двустороннюю передачу данных между компонентами — лучше использовать пропсы + события или v-model.
- Когда нужно глобальное состояние или функции, удобнее применять provide/inject или composables (Pinia/своя store-логика).
- Для простых статических текстов без разметки удобнее передавать пропсы.
Counterexample: если вам нужно просто передать строку заголовка без HTML-разметки, слоты усложнят код по сравнению с пропсами.
Альтернативные подходы
- Пропсы + события: стандартная пара для передачи данных вниз и уведомлений вверх.
- Provide / Inject: полезно для библиотек компонентов или глубоких деревьев, где не хочется пробрасывать пропсы на каждом уровне.
- Composables / Stores: для совместного состояния между несколькими компонентами или страницами.
- Render functions / JSX: когда требуется программная генерация содержимого компонентов.
Ментальные модели и эвристики
- Представьте слот как «место для вкладки» в шаблоне дочернего компонента.
- Используйте именованные слоты, когда у компонента есть несколько фиксированных областей (header, footer, actions).
- Применяйте scoped slots, когда дочерний компонент знает данные, необходимые для правильного отображения содержимого в родителе.
- Избегайте магии: слоты не должны скрывать бизнес-логику — их задача — разметка и композиция.
Роли и чек-листы
Для разработчика:
- Проверить, что слот объявлен в дочернем компоненте.
- Убедиться, что в родителе v-slot привязан к при необходимости.
- Проверить реактивность передаваемых значений.
Для техлида:
- Решить паттерн коммуникации: пропсы/события vs слоты vs provide.
- Обозначить контракты слотов (какие данные предоставляет дочерний компонент).
Для дизайнера:
- Уточнить, какие области интерфейса должны быть заменяемыми.
- Предоставить примеры разметки для слотов (текст, изображения, actions).
Критерии приёмки
- Компонент корректно рендерит контент по умолчанию, если родитель ничего не передал.
- Именованные слоты получают контент только в соответствующие области.
- Scoped slots передают данные, и родитель использует их без ошибок.
- Нет лишних DOM-обёрток, если использован для v-slot.
Быстрая методология внедрения слотов
- Выделите заменяемые области компонента (header, body, footer, actions).
- Объявите слоты (именованные или простые) в шаблоне дочернего компонента.
- Для передачи данных используйте scoped slots: пробросьте рефы или вычисляемые свойства как атрибуты слота.
- В документации компонента опишите API слотов и структуру объектов, которые передаёт компонент.
- Напишите тесты на рендеринг с и без содержимого слотов.
Примерный поток принятия решения
flowchart TD
A[Нужно ли вставлять HTML-разметку из родителя?] -->|Да| B{Несколько областей?}
A -->|Нет| C[Используйте пропсы]
B -->|Да| D[Используйте именованные слоты]
B -->|Нет| E[Используйте простой слот]
D --> F{Нужно ли передавать данные из дочернего компонента в родитель?}
F -->|Да| G[Используйте scoped slots]
F -->|Нет| H[Обычные именованные слоты достаточно]
C --> I[Рассмотрите props + events или v-model]Тесты и приёмочные критерии
- Тест 1: Рендер без передачи контента должен показать fallback-контент.
- Тест 2: Рендер с именованными слотами должен вставить содержимое в правильные области.
- Тест 3: Scoped slot должен получить и отобразить реактивные значения дочернего компонента.
Краткий глоссарий
- Слот: плейсхолдер в шаблоне дочернего компонента.
- Именованный слот: слот с атрибутом name для нескольких областей.
- Scoped slot: слот, который передаёт данные от дочернего компонента в шаблон родителя.
- v-slot: директива для привязки содержимого к слоту.
Заключение
Слоты в Vue — мощный инструмент для композиции UI и создания переиспользуемых компонентов с настраиваемым содержимым. Правильно комбинируя простые, именованные и scoped slots с пропсами и provide/inject, вы получите гибкую архитектуру компонентов без лишней связности.
Notes: при разработке компонентов документируйте контракт слотов — какие именованные области доступны и какие данные может передавать дочерний компонент.
Похожие материалы
Несколько аккаунтов Skype: Multi Skype Launcher
Журнал для работы: повысить продуктивность
Персональные звуки уведомлений на Android
Скачивание шоу Hulu для офлайн‑просмотра
Microsoft Start: персонализированная новостная лента
