Hogyan kommunikál vissza a gyermek komponens a szülő komponenshez?

Question

Accepted Answer

A gyermek **események kibocsátásával** kommunikál *fel* a szülő felé. A szülő `@event-name` segítségével hallgatja őket. Ez Vue egysávos adatfolyamát egészíti ki: **props lefelé, események felfelé**. ## Kibocsátás a gyermekből ```vue ``` ## Hallgatás a szülőben ```vue ``` A gyermek nem tudja (és nem is szabad) közvetlenül módosítani a szülő adatait. Ehelyett *arra kéri* a szülőt, hogy cselekedjen egy esemény kibocsátásával; a szülő rendelkezik az adatokkal és végzi el a módosítást. ## Miért deklaráljuk az emissziókat a defineEmits segítségével ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` A kibocsátott események deklarálása dokumentálja a komponens "kimeneteit", lehetővé teszi a hasznos terhet típusainak ellenőrzését, és megakadályozza, hogy az eseményt véletlenül natív DOM-figyelőként kezeljem. ## Egyéb kommunikációs minták ```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) ``` ## Miért fontos Az események kibocsátása a szabványos, előrelátható módja annak, hogy a gyermekek befolyásolják a szülő állapotát — megőrizve az egysávos adatfolyamot (amely megkönnyíti az alkalmazások megértését és hibakeresését). A `defineEmits` + `@listener` ismerete, valamint az, hogy mikor érdemes a `provide/inject` vagy a Pinia-ra váltani a nem szülő-gyermek kommunikációhoz, Vue komponenst kommunikációs modelljét fedi le.