Что такое Generic Components в Vue 3

Ответ

Generic Components в Vue 3 позволяют создавать компоненты с обобщёнными типами (generics), что особенно полезно для работы с динамическими данными. Они обеспечивают типобезопасность, сохраняя гибкость.

Пример с <GenericList>:

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  itemRenderer: (item: T) => string
}>()
</script>

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

Использование:

<GenericList 
  :items="users" 
  :itemRenderer="(user) => user.name"
/>

Ключевые особенности:

Работают только с Composition API + TypeScript
Позволяют избежать дублирования кода для похожих компонентов
Обеспечивают автодополнение и проверку типов в IDE