Hvordan fungerer komponenter og props i Vue?

Question

Accepted Answer

**Komponenter** er gjenbrukbare, selvstendige UI-deler. **Props** er hvordan en forelder sender data *ned* til et barn — de er barnets typte, skrivebeskyttede inndata. ## Definere props i barnet ```vue ``` ## Sende props fra forelden ```vue ``` Legg merke til forskjellen: `name="Ann"` sender en bokstavelig streng, mens `:age="30"` (med `v-bind`) evaluerer et uttrykk — nødvendig for tall, booleans, objekter eller variabler. Merk også at prop-navn er `camelCase` i JS, men `kebab-case` i maler (`isAdmin` → `:is-admin`). ## Props er enveiskommunikasjon og skrivebeskyttet ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Data flyter **ned** (forelder → barn). Et barn må ikke endre sine props; hvis det trenger å endre noe, bruker det enten en lokal kopi eller **sender en event** som ber forelden om å endre kilden ("props ned, events opp"). Denne enveisflowkommunikasjonen holder data forutsigbar. ## TypeScript props ```vue ``` ## Hvorfor det er viktig Komponenter + props er grunnlaget for Vue-arkitekturen — du komponerer brukergrensesnitt fra gjenbrukbare komponenter og konfigurerer dem via props. Å forstå at props er **enveiskommunikasjon og skrivebeskyttet** (data ned, events opp) er kjernementalmodellen som holder Vue-apper forutsigbar; endring av props eller forventing om toveis prop-flow er en klassisk kilde til bugs.