Comment un composant enfant communique-t-il avec son parent ?

Question

Accepted Answer

Un enfant communique *vers le haut* avec son parent en **émettant des événements**. Le parent les écoute avec `@event-name`. Cela complète le flux de données unidirectionnel de Vue : **les props descendent, les événements montent**. ## Émettre depuis l'enfant ```vue ``` ## Écouter dans le parent ```vue ``` L'enfant ne peut pas (et ne devrait pas) modifier directement les données du parent. À la place, il *demande* au parent d'agir en émettant un événement avec une charge utile ; le parent possède les données et effectue la modification. ## Pourquoi déclarer les émissions avec defineEmits ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Déclarer les événements émis documente les « sorties » du composant, permet la vérification des types des charges utiles, et empêche l'événement d'être accidentellement traité comme un écouteur DOM natif. ## Autres modèles de communication ```text props + emits → parent ↔ direct child (the default, most common) provide/inject → pass data deep down without prop-drilling Pinia store → shared state across unrelated/distant components v-model → two-way binding (props + emit sugar) ``` ## Pourquoi c'est important Émettre des événements est le moyen standard et prévisible pour les enfants d'affecter l'état du parent — en préservant le flux de données unidirectionnel (ce qui rend les applications plus faciles à comprendre et à déboguer). Connaître `defineEmits` + `@listener`, et savoir quand passer à `provide/inject` ou Pinia pour la communication non parent-enfant, couvre le modèle de communication des composants Vue.