Hoe communiceert een onderliggende component terug naar het bovenliggende component?

Question

Accepted Answer

Een onderliggende component communiceert *omhoog* naar zijn bovenliggende door **events uit te zenden**. Het bovenliggende luistert ernaar met `@event-name`. Dit voltooit Vue's eenrichtingsgegevensstroom: **props omlaag, events omhoog**. ## Uitzenden vanuit het onderliggende component ```vue ``` ## Luisteren in het bovenliggende component ```vue ``` Het onderliggende component kan (en mag) de gegevens van het bovenliggende niet rechtstreeks wijzigen. In plaats daarvan *vraagt* het het bovenliggende om actie te ondernemen door een event met een payload uit te zenden; het bovenliggende is eigenaar van de gegevens en brengt de wijziging aan. ## Waarom het belangrijk is ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Declare emitted events documenta de "outputs" van de component, schakelt type-checking van payloads in, en voorkomt dat het event per ongeluk als een native DOM-listener wordt behandeld. ## Andere communicatiepatronen ```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) ``` ## Waarom het belangrijk is Het uitzenden van events is de standaard, voorspelbare manier voor onderliggende componenten om de status van het bovenliggende aan te beïnvloeden — wat eenrichtingsgegevensstroom behoud (wat apps gemakkelijker maakt om over na te denken en op fouten op te sporen). Het kennen van `defineEmits` + `@listener`, en weten wanneer je moet overstappen naar `provide/inject` of Pinia voor communicatie buiten parent-child, dekt Vue's componentcommunicatiemodel.