Jak fungují komponenty a props v Vue?

Question

Accepted Answer

**Komponenty** jsou znovu použitelné, samostatné kousky UI. **Props** jsou způsob, jak rodič přesune data *dolů* dítěti — jsou to typizované, pouze pro čtení vstupy dítěte. ## Definování props v dítěti ```vue ``` ## Předávání props z rodiče ```vue ``` Všimněte si rozdílu: `name="Ann"` předává doslova řetězec, zatímco `:age="30"` (s `v-bind`) vyhodnocuje výraz — potřebné pro čísla, booleovské hodnoty, objekty nebo proměnné. Také si všimněte, že názvy props jsou `camelCase` v JS, ale `kebab-case` v šablonách (`isAdmin` → `:is-admin`). ## Props jsou jednosměrné a pouze pro čtení ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Data tečou **dolů** (rodič → dítě). Dítě nesmí měnit své props; pokud potřebuje něco změnit, buď použije místní kopii, nebo **vydá event** a požádá rodiče, aby změnil zdroj ("props dolů, eventy nahoru"). Tento jednosměrný tok udržuje data předvídatelná. ## TypeScript props ```vue ``` ## Proč na tom záleží Komponenty + props jsou základem Vue architektury — skládáte UI z opakovaně použitelných komponent a konfigurujete je pomocí props. Porozumění, že props jsou **jednosměrné a pouze pro čtení** (data dolů, eventy nahoru), je základní mentální model, který udržuje Vue aplikace předvídatelné; mutování props nebo očekávání obousměrného toku props je klasický zdroj chyb.