Wie kommuniziert eine Child-Komponente an ihre Parent-Komponente zurück?

Question

Accepted Answer

Eine Child-Komponente kommuniziert *nach oben* mit ihrer Parent-Komponente durch **Emitting von Events**. Die Parent-Komponente hört auf sie mit `@event-name`. Dies vervollständigt Vues unidirektionalen Datenfluss: **props nach unten, events nach oben**. ## Emitting aus der Child-Komponente ```vue ``` ## Abhören in der Parent-Komponente ```vue ``` Die Child-Komponente kann (und sollte) die Daten der Parent-Komponente nicht direkt ändern. Stattdessen *bittet* sie die Parent-Komponente zu handeln, indem sie ein Event mit einer Payload aussendet; die Parent-Komponente besitzt die Daten und nimmt die Änderung vor. ## Warum es wichtig ist DefineEmits mit `defineEmits` zu deklarieren ```js const emit = defineEmits(["delete"]); // documents the component's API // or with validation / TypeScript: const emit = defineEmits<{ delete: [id: number] }>(); ``` Die Deklaration von emittierten Events dokumentiert die "Ausgaben" der Komponente, ermöglicht die Type-Überprüfung von Payloads und verhindert, dass das Event versehentlich als native DOM-Listener behandelt wird. ## Andere Kommunikationsmuster ```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) ``` ## Warum es wichtig ist Event-Emitting ist die Standard-, vorhersagbare Methode für Child-Komponenten, um den Parent-State zu beeinflussen — unter Beibehaltung des unidirektionalen Datenflusses (was Apps einfacher verständlich und debugbar macht). Die Kenntnis von `defineEmits` + `@listener` und zu wissen, wann auf `provide/inject` oder Pinia für nicht-Parent-Child-Kommunikation übergehen sollte, deckt Vues Komponentenkommunikationsmodell ab.