Обобщённые компоненты Vue
defineComponent с обобщёнными типами, обобщённый script setup и типизированные свойства слотов
«Обобщённые компоненты Vue» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Обобщённые компоненты
Некоторые компоненты работают с любым типом данных: типизированный список, поле выбора или таблица. Vue 3.3 позволяет создавать обобщённые компоненты, поэтому вызывающий код сохраняет полный вывод типов, вместо того чтобы переходить к any.
Атрибут generic
Добавьте атрибут generic в <script setup>. Он объявляет параметры типов, доступные во всём скрипте, точно как в обобщённой функции.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Обобщённые Props
Используйте параметр типа в defineProps. В этом примере компонент принимает массив значений любого типа T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Вывод типов в месте вызова
Когда родительский компонент передаёт items, TypeScript выводит T из данных — явный тип не нужен. Если передать числа, selected должен иметь тип number.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Ограничение типа
Добавьте extends, чтобы потребовать определённую форму. Здесь T должен содержать id, что удобно для списков с ключами.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Несколько параметров типа
Объявляйте несколько параметров через запятую, как в сигнатуре обобщённой функции.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Типизированные Props слотов
Объедините обобщённые типы с типизированными слотами, чтобы содержимое слота также имело тип. Объявите сигнатуру слота с помощью defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Отрисовка обобщённого слота
В шаблоне передайте каждый элемент в слот. Родительский компонент получит Props слота с правильными типами.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Использование с выводом типов
Родительский компонент автоматически получает типизированный item в области видимости слота — на основе переданного массива.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Обобщённые события
Параметры типов также передаются в defineEmits, поэтому данные события могут содержать обобщённый тип.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Когда использовать обобщённые типы
Используйте обобщённые компоненты, когда компонент действительно не зависит от типа и Вы хотите передавать через него вывод типов: для списков, таблиц и автодополнений. Для фиксированных форм данных проще обычный типизированный компонент.
Быстрая проверка
Проверьте свои знания об обобщённых компонентах.
Итоги
Вы научились создавать обобщённые компоненты:
- Объявлять параметры типов с помощью атрибута generic в script setup.
- Использовать их в defineProps для данных, не зависящих от типа, например items: T[].
- Ограничивать типы с помощью extends и добавлять несколько параметров.
- Типизировать Props слотов с помощью defineSlots, чтобы пользователи получали полный вывод типов.
Часто задаваемые вопросы
Урок «Обобщённые компоненты Vue» бесплатный?
Да — полный текст урока «Обобщённые компоненты Vue» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Обобщённые компоненты Vue»?
defineComponent с обобщёнными типами, обобщённый script setup и типизированные свойства слотов Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Обобщённые компоненты Vue»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка TypeScript в проектах Vue
- Типизированные свойства и события с defineProps/defineEmits
- Типизация композируемых модулей и ссылок
- Обобщённые компоненты Vue