Props et événements des composants
Transmettez les données vers les composants enfants avec defineProps, faites remonter les événements avec defineEmits et validez les props avec les contraintes type et required.
Props et événements des composants est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Props dans Vue 3
Les props transmettent des données du parent vers l’enfant. Dans <script setup>, utilisez defineProps() pour les déclarer. Les props sont en lecture seule dans l’enfant : ne les modifiez jamais directement.
<script setup lang="ts">
const props = defineProps<{
title: string;
count?: number;
variant?: 'primary' | 'secondary';
}>();
</script>
<template>
<h2>{{ title }} ({{ count ?? 0 }})</h2>
</template>withDefaults pour les valeurs par défaut des props
Entourez defineProps() de withDefaults() pour fournir des valeurs par défaut.
<script setup lang="ts">
const props = withDefaults(defineProps<{
count?: number;
variant?: 'primary' | 'secondary';
}>(), {
count: 0,
variant: 'primary'
});
</script>Transmettre des props dans le template
Transmettez les valeurs statiques sous forme d’attributs simples. Transmettez les valeurs dynamiques avec v-bind (:). Transmettez les attributs booléens par leur seule présence, sans valeur.
<MyButton title="Submit" :count="activeCount" variant="primary" />
<Toggle :disabled="isLoading" />Emits — Communication de l’enfant vers le parent
Les enfants communiquent avec le parent en émettant des événements. Utilisez defineEmits() pour déclarer les événements que le composant peut émettre, puis appelez la fonction emit renvoyée.
<script setup lang="ts">
const emit = defineEmits<{
update: [value: string];
close: [];
submit: [data: FormData];
}>();
function handleSubmit(data: FormData) {
emit('submit', data); // fire the event
}
</script>Écouter les emits dans le parent
Utilisez @eventName dans le template pour écouter les événements personnalisés des composants enfants.
<SearchInput
@update="searchTerm = $event"
@submit="handleSearch"
/>v-model avec des composants personnalisés
v-model sur un composant personnalisé est une forme abrégée de :modelValue + @update:modelValue. Le composant doit accepter la prop et émettre l’événement de mise à jour.
<!-- Parent: -->
<MyInput v-model="email" />
<!-- MyInput.vue: -->
<script setup lang="ts">
defineProps<{ modelValue: string }>();
const emit = defineEmits<{ 'update:modelValue': [string] }>();
</script>
<template>
<input :value="modelValue" @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)" />
</template>Plusieurs liaisons v-model
Vue 3 prend en charge plusieurs liaisons v-model sur un même composant avec des modificateurs nommés.
<UserForm v-model:firstName="user.firstName" v-model:lastName="user.lastName" />Validation des props
Dans l’API Options ou dans la déclaration des props à l’exécution, ajoutez des contraintes de type, d’obligation et de validation. La fonction defineProps() basée sur TypeScript fournit ces vérifications lors de la compilation.
Props et données — Flux unidirectionnel
Vue impose un flux de données unidirectionnel : les props vont du parent vers l’enfant ; les événements vont de l’enfant vers le parent. Si un enfant doit modifier des données, il émet un événement et le parent gère la mise à jour.
Les slots comme alternative aux props
Pour du contenu qui doit être du HTML ou des composants, et pas seulement des données, utilisez des slots. Le parent fournit le contenu entre les balises du composant ; l’enfant l’affiche avec <slot />.
<!-- Parent: -->
<Card title="Hello">
<p>This content goes in the default slot.</p>
</Card>
<!-- Card.vue: -->
<template>
<div class="card">
<h2>{{ title }}</h2>
<slot /> <!-- renders the p tag -->
</div>
</template>Vérification rapide
Comment un composant Vue enfant communique-t-il un événement à son parent ?
Récapitulatif : props et emits
defineProps pour déclarer des props typées. withDefaults pour les valeurs par défaut. Les props sont en lecture seule dans les enfants. defineEmits pour déclarer et typer les événements émis. @eventName dans le parent pour écouter les événements. v-model = :modelValue + @update:modelValue. Flux de données unidirectionnel : props vers le bas, événements vers le haut. Slots pour transmettre du contenu ou des fragments de template.
Questions Fréquemment Posées
La leçon « Props et événements des composants » est-elle gratuite ?
Oui — le texte complet de « Props et événements des composants » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Props et événements des composants » ?
Transmettez les données vers les composants enfants avec defineProps, faites remonter les événements avec defineEmits et validez les props avec les contraintes type et required. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 « Props et événements des composants » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- SFC Vue : script, template et style
- API Options : data, methods et computed
- Directives : v-if, v-for, v-bind et v-on
- Props et événements des composants