Slots (слоты) в Vue 3 предоставляют мощный механизм для создания гибких и переиспользуемых компонентов. В этой статье мы разберём все способы передачи параметров в слоты с примерами из реальной практики.
Основные типы слотов в Vue 3
- Слоты по умолчанию — базовый способ передачи контента
- Именованные слоты — для точного позиционирования контента
- Scoped slots — с передачей параметров из дочернего компонента
1. Scoped Slots (Основной способ передачи параметров)
<!-- Дочерний компонент -->
<template>
<div>
<slot :item="item" :index="index"></slot>
</div>
</template>
<!-- Родительский компонент -->
<ChildComponent>
<template v-slot:default="slotProps">
{{ slotProps.item }} - {{ slotProps.index }}
</template>
</ChildComponent>2. Именованные scoped slots
<!-- Дочерний компонент -->
<template>
<div>
<slot name="header" :title="title"></slot>
<slot name="content" :data="contentData"></slot>
</div>
</template>
<!-- Родительский компонент -->
<DataContainer>
<template #header="{ title }">
<h2>{{ title }}</h2>
</template>
<template #content="{ data }">
<p>{{ data.description }}</p>
</template>
</DataContainer>3. Динамические параметры слотов
<!-- Дочерний компонент -->
<script setup>
const slotProps = computed(() => ({
user: currentUser.value,
timestamp: new Date()
}))
</script>
<template>
<slot v-bind="slotProps"></slot>
</template>4. Деструктуризация параметров
<template #item="{ id, name }">
<div>{{ id }}: {{ name }}</div>
</template>Практические примеры
Пример 1: Гибкий список
<SmartList :items="users">
<template #item="{ user }">
<UserCard :user="user" />
</template>
</SmartList>Пример 2: Модальное окно с параметрами
<ModalDialog>
<template #header="{ close }">
<button @click="close">×</button>
</template>
<template #default="{ data }">
{{ data.message }}
</template>
</ModalDialog>Лучшие практики
- Используйте осмысленные имена для параметров слотов
- Для сложных компонентов документируйте структуру слотов
- Избегайте глубокой вложенности scoped slots
- Используйте TypeScript для типизации параметров
Заключение
Scoped slots в Vue 3 предоставляют мощный инструмент для создания гибких компонентов. Освоив передачу параметров в слоты, вы сможете создавать по-настоящему переиспользуемые UI-компоненты.
Для более сложных сценариев рассмотрите использование Composition API вместе со слотами.
Vue 3 Composition API + Slots: Сложные сценарии использования
В сочетании с Composition API слоты Vue 3 раскрывают свою настоящую мощь. Рассмотрим продвинутые паттерны для сложных UI-компонентов.
1. Динамические слоты с реактивными параметрами
<!-- DynamicTable.vue -->
<script setup>
import { ref, computed } from 'vue'
const props = defineProps(['data'])
const sortDirection = ref('asc')
const sortedData = computed(() => {
return [...props.data].sort((a, b) => {
return sortDirection.value === 'asc'
? a.value - b.value
: b.value - a.value
})
})
</script>
<template>
<table>
<slot name="header" :toggleSort="() => sortDirection = sortDirection === 'asc' ? 'desc' : 'asc'"></slot>
<tr v-for="(item, index) in sortedData" :key="index">
<slot :item="item" :index="index"/>
</tr>
</table>
</template>Применение: Таблицы с сортировкой, где логика инкапсулирована в компоненте, а рендеринг контролируется через слоты.
2. Состояние модальных окон
<!-- useModal.js -->
import { ref } from 'vue'
export function useModal() {
const isOpen = ref(false)
const open = () => isOpen.value = true
const close = () => isOpen.value = false
return { isOpen, open, close }
}
<!-- ModalComponent.vue -->
<script setup>
import { useModal } from './useModal'
const modal = useModal()
</script>
<template>
<slot :open="modal.open" :close="modal.close" :isOpen="modal.isOpen"/>
</template>Использование:
<ModalComponent v-slot="{ open, close, isOpen }">
<button @click="open">Открыть</button>
<div v-if="isOpen" class="modal">
<slot name="content"/>
<button @click="close">Закрыть</button>
</div>
</ModalComponent>3. Композиционные слоты для форм
<!-- useFormField.js -->
import { ref, computed } from 'vue'
export function useFormField(initialValue) {
const value = ref(initialValue)
const isValid = computed(() => value.value.length > 0)
return { value, isValid }
}
<!-- FormField.vue -->
<script setup>
import { useFormField } from './useFormField'
const props = defineProps(['initialValue'])
const field = useFormField(props.initialValue)
</script>
<template>
<div class="form-field" :class="{ invalid: !field.isValid }">
<slot :value="field.value" :isValid="field.isValid"/>
</div>
</template>Использование с кастомным input:
<FormField initialValue="" v-slot="{ value, isValid }">
<input
v-model="value"
:class="{ error: !isValid }"
placeholder="Введите текст"
>
<span v-if="!isValid">Поле обязательно</span>
</FormField>4. Сложные компоненты данных
<!-- DataFetcher.vue -->
<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps(['url'])
const data = ref(null)
const error = ref(null)
const isLoading = ref(false)
onMounted(async () => {
isLoading.value = true
try {
const response = await fetch(props.url)
data.value = await response.json()
} catch (err) {
error.value = err
} finally {
isLoading.value = false
}
})
</script>
<template>
<slot
:data="data"
:error="error"
:isLoading="isLoading"
:reload="onMounted"
/>
</template>Использование:
<DataFetcher url="/api/users" v-slot="{ data, isLoading }">
<div v-if="isLoading">Загрузка...</div>
<UserList v-else :users="data" />
</DataFetcher>5. Продвинутый пример: Компонент вкладок
<!-- TabsContainer.vue -->
<script setup>
import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ref([])
const registerTab = (title) => {
const id = tabs.value.length
tabs.value.push({ id, title })
return id
}
const setActiveTab = (id) => {
activeTab.value = id
}
</script>
<template>
<div class="tabs-container">
<div class="tabs-header">
<button
v-for="tab in tabs"
@click="setActiveTab(tab.id)"
:class="{ active: activeTab === tab.id }"
>
{{ tab.title }}
</button>
</div>
<div class="tabs-content">
<slot :activeTab="activeTab"/>
</div>
</div>
</template>Использование:
<TabsContainer v-slot="{ activeTab }">
<template #default>
<Tab :register="registerTab" title="Профиль">
<div v-if="activeTab === 0">...</div>
</Tab>
<Tab :register="registerTab" title="Настройки">
<div v-if="activeTab === 1">...</div>
</Tab>
</template>
</TabsContainer>Заключение
Сочетание Composition API и слотов позволяет создавать:
- Полностью инкапсулированную логику компонентов
- Максимально гибкие API для переиспользуемых компонентов
- Сложные stateful-компоненты с простым интерфейсом
- Легко тестируемые решения (бизнес-логика отделена от рендеринга)