Kako delujejo komponente in props v Vue-u?

Question

Accepted Answer

**Komponente** so ponovno uporabljive, samostojne enote UI. **Props** so način, kako nadrejena komponenta prosledi podatke *navzdol* otroškim komponentam — to so tipizrani, samo za branje dostopni vhodi otroške komponente. ## Definiranje props v otrošaki komponenti ```vue ``` ## Prosljeđivanje props iz nadrejene komponente ```vue ``` Opazite razliko: `name="Ann"` prosledi dobesedno niz, medtem ko `:age="30"` (s `v-bind`) ovrednoti izraz — potrebno je za številke, boolove vrednosti, objekte ali spremenljivke. Prav tako se imena prop v JavaScriptu napišejo kot `camelCase`, v predlogah pa kot `kebab-case` (`isAdmin` → `:is-admin`). ## Props so enosmerika in samo za branje ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Podatki se pretakajo **navzdol** (nadrejena → otroška komponenta). Otroška komponenta ne sme spreminjati svojih props; če mora kaj spremeniti, bodisi uporabi lokalno kopijo bodisi **sproži dogodek**, ki prosi nadrejeno komponento, da spremeni vir ("props navzdol, dogodki navzgor"). To enosmerni pretok pidrži podatke predvidljive. ## TypeScript props ```vue ``` ## Zakaj je to pomembno Komponente in props so temelj Vue arhitekture — UI gradite iz ponovno uporabljenih komponent in jih nastavljate preko props. Razumevanje, da so props **enosmerika in samo za branje** (podatki navzdol, dogodki navzgor), je osnovna mentalna shema, ki drži Vue aplikacije predvidljive; spreminjanje props ali pričakovanje dvosmernega toka prop je tipičen vir napak.