Kako funkcioniraju komponente i props u Vue-u?

Question

Accepted Answer

**Components** su ponovno iskoristive, samostalne dijelove UI-ja. **Props** su način na koji roditelj prosljeđuje podatke *dolje* djetetu — oni su tipiziranog djeteta, samo za čitanje ulaza. ## Definiranje props-a u djetetu ```vue ``` ## Prosljeđivanje props-a od roditelja ```vue ``` Primjetite razliku: `name="Ann"` prosljeđuje doslovno znakovu, dok `:age="30"` (sa `v-bind`) evaluira izraz — potrebno za brojeve, boolean, objekte ili varijable. Također primijetite da su imena prop-a `camelCase` u JS-u, ali `kebab-case` u template-ima (`isAdmin` → `:is-admin`). ## Props su jednosmjerni i samo za čitanje ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Podaci teku **dolje** (roditelj → dijete). Dijete ne smije mijenjati svoje props; ako treba nešto promijeniti, koristi lokalnu kopiju ili **emitira event** tražeći od roditelja da promijeni izvor ("props dolje, eventi gore"). Ovaj jednosmjerni tok čini podatke predvidljivim. ## TypeScript props ```vue ``` ## Zašto je to važno Componente + props su temelj Vue arhitekture — komponente UI sastavite iz ponovno iskoristivih komponenti i konfigurujete ih pomoću props-a. Razumijevanje da su props **jednosmjerni i samo za čitanje** (podaci dolje, eventi gore) je temeljni mentalni model koji čini Vue aplikacije predvidljivima; mutiranje props-a ili očekivanje dvosmjerni prop toka klasičan je izvor grešaka.