Composants Vue génériques
defineComponent avec des types génériques, script setup générique et props d’emplacements typées
Composants Vue génériques est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Composants génériques
Certains composants fonctionnent avec n’importe quel type de données : une liste typée, un sélecteur ou un tableau. Vue 3.3 vous permet d’écrire des composants génériques, afin que l’utilisateur conserve une inférence complète des types au lieu de revenir à any.
L’attribut générique
Ajoutez un attribut generic à <script setup>. Il déclare des paramètres de type disponibles dans tout le script, exactement comme une fonction générique.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Props génériques
Utilisez le paramètre de type dans defineProps. Ici, le composant accepte un tableau de n’importe quel type T.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Inférence du type au site d’appel
Lorsque le parent transmet items, TypeScript déduit T à partir des données : aucun type explicite n’est nécessaire. Si vous transmettez des nombres, selected doit être un nombre.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Contraindre le type
Ajoutez extends pour imposer une structure donnée. Ici, T doit posséder un id, ce qui est utile pour les listes indexées.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Plusieurs paramètres de type
Déclarez plusieurs paramètres séparés par des virgules, comme dans la signature d’une fonction générique.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Propriétés d’emplacement typées
Combinez les génériques avec des emplacements typés afin que leur contenu soit également typé. Déclarez la signature de l’emplacement avec defineSlots.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Afficher l’emplacement générique
Dans le modèle, transmettez chaque élément à l’emplacement. Le parent reçoit des propriétés d’emplacement correctement typées.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Utiliser l’inférence
Le parent reçoit automatiquement un item typé dans la portée de l’emplacement, en fonction du tableau qu’il a transmis.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Événements génériques
Les paramètres de type sont également transmis à defineEmits, de sorte que la charge utile d’un événement puisse transporter le type générique.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Quand utiliser les génériques
Choisissez des composants génériques lorsqu’un composant est véritablement indépendant du type et que vous souhaitez faire circuler l’inférence à travers lui : listes, tableaux, champs à autocomplétion. Pour des structures de données fixes, un composant typé classique est plus simple.
Vérification rapide
Vérifiez vos connaissances sur les composants génériques.
Récapitulatif
Vous avez appris les composants génériques :
- Déclarez des paramètres de type avec l’attribut generic sur script setup.
- Utilisez-les dans defineProps pour des données indépendantes du type, comme items: T[].
- Imposez des contraintes avec extends et ajoutez plusieurs paramètres.
- Typez les propriétés d’emplacement avec defineSlots afin que les utilisateurs bénéficient d’une inférence complète.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 42
- Leçons
- 156
Questions Fréquemment Posées
La leçon « Composants Vue génériques » est-elle gratuite ?
Oui — le texte complet de « Composants Vue génériques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Composants Vue génériques » ?
defineComponent avec des types génériques, script setup générique et props d’emplacements typées Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Composants Vue génériques » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer TypeScript dans les projets Vue
- Props et événements typés avec defineProps/defineEmits
- Typer les composables et les refs
- Composants Vue génériques