Hvordan fungerer komponenter og props i Vue?

Question

Accepted Answer

**Komponenter** er genanvendelige, selvstændige UI-elementer. **Props** er måden, hvorpå en forælder sender data *ned* til et barn — de er barnets typede, skrivebeskyttede input. ## Definition af props i barnet ```vue ``` ## Passing af props fra forælder ```vue ``` Bemærk forskellen: `name="Ann"` sender en ordret streng, mens `:age="30"` (med `v-bind`) evaluerer et udtryk — nødvendigt for tal, booleske værdier, objekter eller variabler. Bemærk også, at prop-navne er `camelCase` i JS, men `kebab-case` i skabeloner (`isAdmin` → `:is-admin`). ## Props er ensrettet og skrivebeskyttet ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Data flyder **ned** (forælder → barn). Et barn må ikke ændre sine props; hvis det skal ændre noget, bruger det enten en lokal kopi eller **udsender en event** og beder forælder om at ændre kilden ("props ned, events op"). Denne ensrettede flow holder data forudsigelig. ## TypeScript props ```vue ``` ## Hvorfor det betyder noget Komponenter + props er grundlaget for Vue-arkitektur — du sammensætter UI'er fra genanvendelige komponenter og konfigurerer dem via props. At forstå, at props er **ensrettet og skrivebeskyttet** (data ned, events op), er den centrale tankemodel, der holder Vue-apps forudsigelige; ændring af props eller forventning om torettet prop-flow er en klassisk kilde til fejl.