Коротко про слоты в Vue.js

Привет, Хабр!

Когда ты разрабатываешь интерфейсы на Vue.js, рано или поздно приходит момент, когда простые пропсы уже не спасают. Допустим, нужно сделать компонент не просто гибким, а настолько гибким, чтобы его можно было адаптировать под любые сценарии. Пропсами ты тут не отделаешься. И вот тут могут помочь слоты.

Начнём с простого

Что такое слоты? Это такие места в компоненте, куда можно вставлять разметку. Рассмотрим базовый пример:

<template>   <div class="card">     <header>       Default header     </header>     <main>       Default content     </main>     <footer>       Default footer     </footer>   </div> </template>

Здесь есть три слота: один дефолтный и два именованных. Когда используешь этот компонент, можно легко кастомизировать содержимое, вставив свой контент в нужное место:

<template>   <card>     <template #default>       <h1>Мой кастомный заголовок</h1>     </template>     <template #main>       <p>Это мой кастомный контент.</p>     </template>     <template #footer>       <p>Кастомный футер.</p>     </template>   </card> </template>

Результат — компонент кастомизирован именно так, как нужно. У каждого клиента или задачи может быть своя версия контента, и слоты позволяют сделать компонент универсальным.

Именованные слоты

Когда дело доходит до более сложных интерфейсов, нужны уже именованные слоты. Они помогают не просто передавать контент, а разбрасывать его по нужным местам. Например, есть модальное окно с несколькими зонами (заголовок, тело и футер). И вот как можно это реализовать:

<template>   <div class="modal">     <div class="modal-header">       <slot name="header">Default Modal Header</slot>     </div>     <div class="modal-body">       <slot name="body">Default Body Content</slot>     </div>     <div class="modal-footer">       <slot name="footer">Default Modal Footer</slot>     </div>   </div> </template>

Кастомизация может выглядеть так:

<template>   <modal>     <template #header>       <h2>Кастомный заголовок</h2>     </template>     <template #body>       <p>Кастомное тело модального окна.</p>     </template>     <template #footer>       <button>Кнопка для футера</button>     </template>   </modal> </template>

Когда это может пригодиться: В проектах с разными пользователями и ролями. Например, админы видят один набор кнопок, модераторы — другой.

p.s:

Если не передавать контент в слот, будет использоваться контент по умолчанию.

Scoped Slots

Теперь перейдём к Scoped Slots. С ними можно передавать не просто контент, а логику и данные в компонент.

Представим, что есть компонент, который передаёт в слот данные. Например, список элементов:

<template>   <div>     <slot :items="items"></slot>   </div> </template>  <script> export default {   data() {     return {       items: ['Элемент 1', 'Элемент 2', 'Элемент 3']     };   } }; </script>

Теперь можно использовать эти данные для кастомизации компонента:

<template>   <div>     <ul>       <li v-for="item in items" :key="item">{{ item }}</li>     </ul>   </div> </template>

Где может пригодиться: в проектах, когда нужно построить что-то вроде таблицы, где каждая ячейка отображает разные данные в зависимости от логики. Например, можно рендерить разные элементы в зависимости от роли пользователя или состояния приложения.

Динамические компоненты

Допустим, нужно что-то ещё более сложное — компонент, который сам решает, какие слоты ему нужны, и когда. Например, в зависимости от состояния или данных. Здесь помогают динамические компоненты.

Пример:

<template>   <component :is="dynamicComponent">     <template #header>Заголовок</template>     <template #body>Основной контент</template>   </component> </template>  <script> export default {   data() {     return {       dynamicComponent: 'CardComponent'  // Это может быть любое имя компонента     };   } }; </script>

Можно менять компонент динамически, в зависимости от логики приложения.

В одном проекте у нас был интерфейс с виджетами, которые должны были меняться на лету в зависимости от данных. Динамические компоненты позволяют создавать интерфейсы, которые автоматически подстраиваются под любые данные, без необходимости дублировать код.

Что дальше?

Если слоты уже не кажутся cложностью, стоит углубиться в такие темы, как:

• Композиционное API — для более гибкого построения логики компонентов.

• Рендер-функции — когда нужно ещё больше контроля над тем, как рендерятся компоненты.

23 октября для новичков в Vue.js пройдет открытый урок «Composition API против Options API: что выбрать?». Полученные на уроке знания будут полезны при любом взаимодействии с Vue.js, так как это основы работы. Если интересно — записывайтесь на урок на странице курса «Vue.js разработчик».