Коротко про слоты в Vue.js
Привет, Хабр!
Когда ты разрабатываешь интерфейсы на Vue.js, рано или поздно приходит момент, когда простые пропсы уже не спасают. Допустим, нужно сделать компонент не просто гибким, а настолько гибким, чтобы его можно было адаптировать под любые сценарии. Пропсами ты тут не отделаешься. И вот тут могут помочь слоты.
Начнём с простого
Что такое слоты? Это такие места в компоненте, куда можно вставлять разметку. Рассмотрим базовый пример:
Default header
Default content
Здесь есть три слота: один дефолтный и два именованных. Когда используешь этот компонент, можно легко кастомизировать содержимое, вставив свой контент в нужное место:
Default header
Default content
Результат — компонент кастомизирован именно так, как нужно. У каждого клиента или задачи может быть своя версия контента, и слоты позволяют сделать компонент универсальным.
Именованные слоты
Когда дело доходит до более сложных интерфейсов, нужны уже именованные слоты. Они помогают не просто передавать контент, а разбрасывать его по нужным местам. Например, есть модальное окно с несколькими зонами (заголовок, тело и футер). И вот как можно это реализовать:
Default Modal Header
Default Body Content
Кастомизация может выглядеть так:
Кастомный заголовок
Кастомное тело модального окна.
Когда это может пригодиться: В проектах с разными пользователями и ролями. Например, админы видят один набор кнопок, модераторы — другой.
p.s:
Если не передавать контент в слот, будет использоваться контент по умолчанию.
Scoped Slots
Теперь перейдём к Scoped Slots. С ними можно передавать не просто контент, а логику и данные в компонент.
Представим, что есть компонент, который передаёт в слот данные. Например, список элементов:
Теперь можно использовать эти данные для кастомизации компонента:
- {{ item }}
Где может пригодиться: в проектах, когда нужно построить что-то вроде таблицы, где каждая ячейка отображает разные данные в зависимости от логики. Например, можно рендерить разные элементы в зависимости от роли пользователя или состояния приложения.
Динамические компоненты
Допустим, нужно что-то ещё более сложное — компонент, который сам решает, какие слоты ему нужны, и когда. Например, в зависимости от состояния или данных. Здесь помогают динамические компоненты.
Пример:
Заголовок
Основной контент
Можно менять компонент динамически, в зависимости от логики приложения.
В одном проекте у нас был интерфейс с виджетами, которые должны были меняться на лету в зависимости от данных. Динамические компоненты позволяют создавать интерфейсы, которые автоматически подстраиваются под любые данные, без необходимости дублировать код.
Что дальше?
Если слоты уже не кажутся cложностью, стоит углубиться в такие темы, как:
Композиционное API — для более гибкого построения логики компонентов.
Рендер-функции — когда нужно ещё больше контроля над тем, как рендерятся компоненты.
23 октября для новичков в Vue.js пройдет открытый урок «Composition API против Options API: что выбрать?». Полученные на уроке знания будут полезны при любом взаимодействии с Vue.js, так как это основы работы. Если интересно — записывайтесь на урок на странице курса «Vue.js разработчик».
