Hogyan működnek a komponensek és a props a Vue-ben?

Question

Accepted Answer

**Components** újrafelhasználható, önálló UI-elemek. **Props** az a módszer, ahogyan a szülő *lefelé* adatokat ad át a gyermeknek — ezek a gyermek tipizált, csak olvasható bemeneti értékei. ## Props definiálása a gyermekben ```vue ``` ## Props átadása a szülőtől ```vue ``` Vegyük észre a különbséget: a `name="Ann"` egy szövegkonstanst ad át, míg a `:age="30"` (a `v-bind` használatával) egy kifejezést értékel ki — számok, boolean-ok, objektumok vagy változók esetén szükséges. Vegyük azt is észre, hogy a prop-nevek JS-ben `camelCase` alakúak, de template-ekben `kebab-case` alakúak (`isAdmin` → `:is-admin`). ## A Props egyirányú és csak olvasható ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Az adatok **lefelé** áramolnak (szülő → gyermek). A gyermeknek nem szabad módosítania a prop-jait; ha valamit meg kell változtatnia, vagy egy helyi másolatot használ, vagy **egy eseményt küld** kérve a szülőt a forrás megváltoztatására ("prop-ok lefelé, események felfelé"). Ez az egyirányú áramlás az adatokat kiszámíthatóvá teszi. ## TypeScript props ```vue ``` ## Miért fontos Componentsek + props a Vue architektúra alapja — a felhasználói felületet újrafelhasználható komponensekből összeállítja, és props-on keresztül konfigurálja őket. Annak megértése, hogy a props **egyirányú és csak olvasható** (adatok lefelé, események felfelé), az a fundamental mentális modell, amely a Vue-alkalmazásokat kiszámíthatóvá teszi; a prop-ok mutálása vagy kétirányú prop-áramlás elvárása a hibák klasszikus forrása.