Come comunica un componente figlio al suo genitore?

Question

Accepted Answer

Un componente figlio comunica *verso l'alto* al suo genitore **emettendo eventi**. Il genitore li ascolta con `@event-name`. Questo completa il flusso dati unidirezionale di Vue: **props in basso, eventi in alto**. ## Emettere dal componente figlio ```vue ``` ## Ascoltare nel componente genitore ```vue ``` Il componente figlio non può (e non dovrebbe) modificare direttamente i dati del genitore. Invece *chiede* al genitore di agire emettendo un evento con un payload; il genitore possiede i dati e fa il cambiamento. ## Perché dichiarare emits con defineEmits ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Dichiarare gli eventi emessi documenta gli "output" del componente, abilita il type-checking dei payload, e previene che l'evento sia accidentalmente trattato come un listener DOM nativo. ## Altre comunicazioni ```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) ``` ## Perché è importante Emettere eventi è il modo standard e prevedibile per i componenti figli di influenzare lo stato del genitore — preservando il flusso dati unidirezionale (che rende le app più facili da ragionare e debuggare). Conoscere `defineEmits` + `@listener`, e quando passare a `provide/inject` o Pinia per la comunicazione non genitore-figlio, copre il modello di comunicazione dei componenti in Vue.