Hvordan kommuniserer en barnkomponent tilbake til sin forelder?

Question

Accepted Answer

En barn kommuniserer *oppover* til sin forelder ved å **sende ut hendelser**. Forelden lytter etter dem med `@event-name`. Dette fullfører Vue's enveisdata flyt: **props ned, hendelser opp**. ## Sende ut fra barnet ```vue ``` ## Lytte i foreldren ```vue ``` Barnet kan (og bør) ikke endre forelderens data direkte. I stedet *ber* det foreldren om å handle ved å sende ut en hendelse med en last; foreldren eier dataene og gjør endringen. ## Hvorfor erklære emits med defineEmits ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Å erklære sendte hendelser dokumenterer komponentens "utganger," aktiverer type-sjekking av laster, og forhindrer at hendelsen ved en ulykke blir behandlet som en native DOM-lytter. ## Andre kommunikasjonsmø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 betyr noe Å sende ut hendelser er den standard, forutsigbare måten for barn å påvirke foreldrens tilstand — bevarer enveisdata flyt (som gjør apper lettere å resonnere om og feilsøke). Å kjenne `defineEmits` + `@listener`, og når man skal gå videre til `provide/inject` eller Pinia for ikke-parent-child-kommunikasjon, dekker Vue's komponentkommunikasjonsmodell.