Hvordan kommunikerer en underkomponent tilbage til sin forælder?

Question

Accepted Answer

En underkomponent kommunikerer *op* til sin forælder ved at **udsende events**. Forælderen lytter til dem med `@event-name`. Dette fuldfører Vue's envejs dataflow: **props ned, events op**. ## Udsendelse fra underkomponenten ```vue ``` ## Lytning i forælderen ```vue ``` Underkomponenten kan (og bør) ikke ændre forælderens data direkte. I stedet *beder* den forælderen om at handle ved at udsende en event med en payload; forælderen ejer dataene og foretager ændringen. ## Hvorfor deklarere emits med defineEmits ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Deklarering af udsendte events dokumenterer komponentens "outputs", muliggør type-checking af payloads, og forhindrer, at eventen ved en fejl bliver behandlet som en native DOM listener. ## Andre kommunikationsmønstre ```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) ``` ## Hvorfor det betyder noget At udsende events er den standard, forudsigelige måde for underkomponenter at påvirke forælderens state på — ved at bevare envejs dataflow (som gør apps lettere at forstå og fejlfinde). At kende `defineEmits` + `@listener`, og hvornår man skal skifte til `provide/inject` eller Pinia for ikke-forælder-barn kommunikation, dækker Vue's komponentkommunikationsmodel.