Props et événements personnalisés
Transmettez des données vers les composants enfants avec des props et émettez des événements vers les parents
Props et événements personnalisés est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. 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 3 leçons au total.
Communication parent-enfant
Les composants communiquent dans deux directions :
- Les props transmettent les données du parent vers l’enfant
- Les événements envoient des messages de l’enfant vers le parent
Ce flux de données à sens unique rend les applications prévisibles.
Déclarer des props
Un enfant déclare les props qu’il accepte. Dans script setup, utilisez defineProps.
<script setup>
const props = defineProps(['title', 'count'])
</script>
<template>
<h2>{{ title }}</h2>
<p>{{ count }}</p>
</template>Props avec types
Déclarez les props sous forme d’objet pour spécifier des types à des fins de validation.
<script setup>
defineProps({
title: String,
count: Number,
isActive: Boolean
})
</script>Props avec valeurs par défaut et obligatoires
Vous pouvez marquer des props comme obligatoires et leur attribuer des valeurs par défaut.
<script setup>
defineProps({
title: {
type: String,
required: true
},
count: {
type: Number,
default: 0
}
})
</script>Transmettre des props depuis un parent
Le parent transmet les données sous forme d’attributs. Utilisez : pour lier des valeurs dynamiques.
<template>
<ProductCard
title="Coffee Mug"
:count="stock"
:is-active="available"
/>
</template>
<!-- static string vs bound expression -->Convention de nommage des props
Déclarez les props en camelCase dans JS et transmettez-les en kebab-case dans les modèles.
- Prop JS : isActive
- Attribut du modèle : :is-active
Vue effectue automatiquement la conversion entre les deux formes.
Les props sont en lecture seule
Un enfant ne doit pas modifier directement ses props.
- Les props circulent dans un seul sens, vers le bas
- Les modifier compromet la prévisibilité et déclenche des avertissements
- Pour modifier des données partagées, émettez un événement afin que le parent les mette à jour
Déclarer les événements émis
Un enfant déclare les événements qu’il émet avec defineEmits.
<script setup>
const emit = defineEmits(['increment', 'delete'])
</script>Émettre un événement
Appelez la fonction emit pour envoyer un événement vers le parent, éventuellement accompagné d’une charge utile.
<script setup>
const emit = defineEmits(['add'])
function handleClick() {
emit("add", { id: 1, name: "Item" })
}
</script>
<template>
<button @click="handleClick">Add</button>
</template>Émettre un événement avec l’API des options
Avec l’API des options, vous appelez plutôt this.$emit.
export default {
emits: ["save"],
methods: {
onSave() {
this.$emit("save", this.formData)
}
}
}Le parent écoute les événements
Le parent écoute avec @event-name et reçoit la charge utile.
<template>
<TodoItem
:task="task"
@delete="removeTask"
@add="onAdd"
/>
</template>
<script setup>
function onAdd(item) {
console.log("Added:", item.name)
}
</script>Vérification rapide
Vérifiez votre compréhension des props et des événements.
Récapitulatif : props et événements
Vous avez appris comment les composants communiquent :
- defineProps déclare les props avec leurs types et leurs valeurs par défaut
- Les props circulent vers le bas et sont en lecture seule
- defineEmits déclare les événements
- emit("name", payload) envoie les événements vers le haut
- Le parent écoute avec @event
Ensuite : slots et slots avec portée.
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 « Props et événements personnalisés » est-elle gratuite ?
Oui — le texte complet de « Props et événements personnalisés » 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 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Props et événements personnalisés » ?
Transmettez des données vers les composants enfants avec des props et émettez des événements vers les parents 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 2 sur 3.
Combien de temps prend la leçon « Props et événements personnalisés » ?
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
- Créer et enregistrer des composants
- Props et événements personnalisés
- Emplacements et emplacements avec portée