Jak komponenty i props działają w Vue?

Question

Accepted Answer

**Komponenty** to wielokrotnie użyteczne, samodzielne elementy interfejsu użytkownika. **Props** to sposób, w jaki rodzic przekazuje dane *w dół* do dziecka — są to wpisane, tylko do odczytu dane wejściowe dziecka. ## Definiowanie props w dziecku ```vue ``` ## Przekazywanie props z rodzica ```vue ``` Zwróć uwagę na różnicę: `name="Ann"` przekazuje dosłowny ciąg znaków, natomiast `:age="30"` (z `v-bind`) ocenia wyrażenie — wymagane dla liczb, wartości logicznych, obiektów lub zmiennych. Zwróć też uwagę, że nazwy props używają `camelCase` w JS, ale `kebab-case` w szablonach (`isAdmin` → `:is-admin`). ## Props to komunikacja jednokierunkowa i tylko do odczytu ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Dane płyną **w dół** (rodzic → dziecko). Dziecko nie powinno modyfikować swoich props; jeśli musi coś zmienić, albo używa lokalnej kopii, albo **emituje zdarzenie** prosząc rodzica o zmianę źródła ("props w dół, zdarzenia w górę"). Ten jednokierunkowy przepływ utrzymuje dane przewidywalne. ## Props w TypeScript ```vue ``` ## Dlaczego to ważne Komponenty + props stanowią fundament architektury Vue — tworzysz interfejsy użytkownika z wielokrotnie użytecznych komponentów i konfigurujesz je za pośrednictwem props. Zrozumienie, że props to **komunikacja jednokierunkowa i tylko do odczytu** (dane w dół, zdarzenia w górę) jest kluczowym modelem mentalnym, który utrzymuje aplikacje Vue przewidywalne; mutowanie props lub oczekiwanie dwukierunkowego przepływu props to klasyczne źródło błędów.