Hur fungerar komponenter och props i Vue?

Question

Accepted Answer

**Komponenter** är återanvändbara, självständiga UI-enheter. **Props** är hur en föräldrakomponent skickar data *nedåt* till en barnkomponent — de är barnets typade, skrivskyddade inmatningar. ## Definiera props i barnkomponenten ```vue ``` ## Skicka props från föräldrakomponenten ```vue ``` Observera skillnaden: `name="Ann"` skickar en literal sträng, medan `:age="30"` (med `v-bind`) utvärderar ett uttryck — nödvändigt för siffror, booleska värden, objekt eller variabler. Lägg också märke till att prop-namn är `camelCase` i JS men `kebab-case` i templates (`isAdmin` → `:is-admin`). ## Props är enkelriktade och skrivskyddade ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Data flödar **nedåt** (förälder → barn). Ett barn får inte ändra sina props; om det behöver ändra något, använder det antingen en lokal kopia eller **skickar en event** som ber föräldern att ändra källan ("props ner, events upp"). Detta enkelriktade flöde håller data förutsägbar. ## TypeScript props ```vue ``` ## Varför det är viktigt Komponenter och props är grunden till Vue-arkitektur — du sammanställer UI:er från återanvändbara komponenter och konfigurerar dem via props. Att förstå att props är **enkelriktade och skrivskyddade** (data ner, events upp) är den grundläggande mentalmodell som håller Vue-appar förutsägbara; att mutrera props eller förvänta ett tvåvägsflöde för props är en klassisk källa till buggar.