Hoe werken componenten en props in Vue?

Question

Accepted Answer

**Componenten** zijn herbruikbare, zelfstandige stukken UI. **Props** zijn hoe een ouder gegevens *naar beneden* doorgeeft aan een kind — het zijn de getypeerde, alleen-lezen invoeren van het kind. ## Props in het kind definiëren ```vue ``` ## Props van de ouder dooregeven ```vue ``` Let op het verschil: `name="Ann"` geeft een letterlijke string door, terwijl `:age="30"` (met `v-bind`) een expressie evalueert — nodig voor getallen, booleans, objecten of variabelen. Merk ook op dat propsamen `camelCase` zijn in JS maar `kebab-case` in templates (`isAdmin` → `:is-admin`). ## Props zijn eenrichtings en alleen-lezen ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Gegevens stromen **naar beneden** (ouder → kind). Een kind mag zijn props niet aanpassen; als het iets moet veranderen, gebruikt het ofwel een lokale kopie, ofwel **stuurt het een event** om de ouder te vragen de bron te veranderen ("props naar beneden, events naar boven"). Deze eenrichtingsstroom houdt gegevens voorspelbaar. ## TypeScript props ```vue ``` ## Waarom het belangrijk is Componenten + props zijn de basis van de Vue-architectuur — je stelt UIs samen uit herbruikbare componenten en configureert ze via props. Begrijpen dat props **eenrichtings en alleen-lezen** zijn (gegevens naar beneden, events naar boven) is het kernconceptmodel dat Vue-apps voorspelbaar houdt; het wijzigen van props of het verwachten van tweerichtingspropsflow is een klassieke bron van bugs.