Registrierungspflichtiger Artikel

Das JavaScript-Framework Vue.js, Teil 5 Props und Custom Events in Vue

Von Dr. Dirk Koller

Alle Komponenten einer Vue-Anwendung müssen Daten austauschen können. Wie diese Kommunikation über so genannte Properties und Events realisiert wird, schauen wir uns in diesem Teil der Vue.js-Reihe an.

Anbieter zum Thema

Mithilfe von props und events wird der Datenaustausch zwischen verschiedenen Vue-App-Komponenten gewährleistet.
Mithilfe von props und events wird der Datenaustausch zwischen verschiedenen Vue-App-Komponenten gewährleistet.
(Bild: vueschool.io)

Eine Vue-Anwendung wird verschiedene Komponenten mit jeweils eigener Logik und eigenem User Interface aufgeteilt. So bleibt der Code übersichtlich, wiederverwendbar und wartbar. Allerdings bringt das auch ein neues Problem mit sich: Jede Komponente verfügt über eigene Daten.

Um sich bei Datenänderungen gegenseitig auf dem aktuellen Stand zu halten, müssen die Komponenten miteinander kommunizieren. Diese Kommunikation kann in zwei Richtungen erfolgen: von der umgebenden Parent-Komponente in die Child-Komponente und bei wichtigen Datenänderungen in der Child-Komponente auch in umgekehrter Richtung.