Wie funktionieren Komponenten und Props in Vue?

Question

Accepted Answer

**Komponenten** sind wiederverwendbare, in sich geschlossene UI-Teile. **Props** sind die Möglichkeit, wie ein Elternteil Daten *hinunter* an ein Kind weitergibt — sie sind die typisierten, schreibgeschützten Eingaben des Kindes. ## Props im Kind definieren ```vue ``` ## Props vom Elternteil übergeben ```vue ``` Beachte den Unterschied: `name="Ann"` übergibt eine Zeichenkette wörtlich, während `:age="30"` (mit `v-bind`) einen Ausdruck auswertet — notwendig für Zahlen, boolesche Werte, Objekte oder Variablen. Beachte auch, dass Prop-Namen in JS `camelCase` sind, aber in Templates `kebab-case` (`isAdmin` → `:is-admin`). ## Props sind unidirektional und schreibgeschützt ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Daten fließen **hinunter** (Elternteil → Kind). Ein Kind darf seine Props nicht ändern; wenn es etwas ändern muss, verwendet es entweder eine lokale Kopie oder **gibt ein Event ab** und bittet den Elternteil, die Quelle zu ändern ("Props hinunter, Events hinauf"). Dieser unidirektionale Fluss hält Daten vorhersehbar. ## TypeScript Props ```vue ``` ## Warum es wichtig ist Komponenten + Props sind die Grundlage der Vue-Architektur — du setzt UIs aus wiederverwendbaren Komponenten zusammen und konfigurierst sie über Props. Das Verständnis, dass Props **unidirektional und schreibgeschützt** sind (Daten hinunter, Events hinauf), ist das zentrale Gedankenmodell, das Vue-Apps vorhersehbar hält; das Ändern von Props oder die Erwartung eines bidirektionalen Prop-Flusses ist eine klassische Fehlerquelle.