В Naive UI слоты используются для передачи содержимого от родительского компонента к дочернему компоненту, предоставляя гибкость в кастомизации интерфейса. Слоты позволяют заменить часть разметки компонента на пользовательскую без изменения внутренней логики компонента.
Каждый компонент Naive UI может предоставлять именованные слоты и слот по умолчанию. Слот по умолчанию используется, если в компонент не переданы конкретные именованные слоты.
Нажми меня
В этом примере текст “Нажми меня” передан в слот по умолчанию
компонента n-button.
Именованные слоты позволяют вставлять содержимое в определенные части
компонента. Для их использования в Naive UI используется директива
v-slot или синтаксис
.
Пример:
Заголовок карточки
Подвал карточки
Основное содержимое карточки
Здесь:
header и footer — именованные слоты
компонента n-card.Scoped slots дают возможность передавать данные из дочернего компонента в родительский через слот. В Naive UI это особенно полезно для компонентов типа таблиц, списков и селектов.
Пример с n-data-table:
{{ row.status ? 'Активен' : 'Не активен' }}
{{ row[column.key] }}
Объяснение:
bodyCell — scoped slot компонента
n-data-table.{ row, column } — объект с данными текущей строки и
колонки.Naive UI поддерживает динамическое использование слотов через объектную передачу содержимого. Это удобно для компонентов, которые рендерят множество повторяющихся элементов с разной разметкой.
Пример:
{{ tab.content }}
Здесь каждый таб использует слот с именем, соответствующим имени вкладки. Такой подход позволяет динамически создавать интерфейс без дублирования кода.
В Naive UI слоты можно комбинировать для создания сложных
интерфейсов. Например, внутри n-card можно использовать
слот по умолчанию вместе с именованными слотами для заголовка и
подвала:
Пользовательский заголовок
Основное содержимое карточки
Кнопки действий
v-slot.