Cum funcționează componentele și props în Vue?

Question

Accepted Answer

**Componentele** sunt bucăți de interfață de utilizator reutilizabile și independente. **Props** sunt cum un părinte transmite date *în jos* unui copil — sunt intrările tipizate și doar pentru citire ale copilului. ## Definirea props în copil ```vue ``` ## Transmiterea props de la părinte ```vue ``` Observați diferența: `name="Ann"` transmite un șir literal, în timp ce `:age="30"` (cu `v-bind`) evaluează o expresie — necesar pentru numere, booleeni, obiecte sau variabile. De asemenea, observați că numele props sunt `camelCase` în JS, dar `kebab-case` în șabloane (`isAdmin` → `:is-admin`). ## Props sunt unidirecționale și doar pentru citire ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Datele curg **în jos** (părinte → copil). Un copil nu trebuie să modifice props-urile; dacă trebuie să schimbe ceva, fie folosește o copie locală, fie **emite un eveniment** care cere părintelui să schimbe sursa ("props în jos, evenimente în sus"). Acest flux unidirecțional ține datele previzibile. ## Props cu TypeScript ```vue ``` ## De ce este important Componentele + props sunt fundamentul arhitecturii Vue — compuneți interfețe utilizator din componente reutilizabile și le configurați prin props. Înțelegerea că props sunt **unidirecționale și doar pentru citire** (date în jos, evenimente în sus) este modelul mental central care ține aplicațiile Vue previzibile; mutarea props sau așteptarea unui flux bidirecțional de props este o sursă clasică de erori.