Kaip Vue komponentai ir props veikia?

Question

Accepted Answer

**Komponentai** yra pakartotinai naudojami, savarankiški UI daliai. **Props** yra būdas, kaip tėvas praeina duomenis *žemyn* vaikui — tai yra vaiko tipizuoti, tik skaitytini įėjimai. ## Props apibrėžimas vaike ```vue ``` ## Props perdavimas iš tėvo ```vue ``` Atkreipkite dėmesį į skirtumą: `name="Ann"` praeina pažodinė eilutė, o `:age="30"` (su `v-bind`) vertina išraišką — reikalinga skaičiams, loginėms reikšmėms, objektams ar kintamiesiems. Taip pat atkreipkite dėmesį, kad props vardai yra `camelCase` JS, bet `kebab-case` šablonuose (`isAdmin` → `:is-admin`). ## Props yra vienkrypčiai ir tik skaitytini ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Duomenys teka **žemyn** (tėvas → vaikas). Vaikas neturi modifikuoti savo props; jei reikia ką nors pakeisti, jis naudoja vietinę kopiją arba **skleidžia įvykį**, prašydamas tėvo pakeisti šaltinį ("props žemyn, įvykiai aukštyn"). Šis vienkrypčio srautio modelis palaikoduomenis nuspėjamus. ## TypeScript props ```vue ``` ## Kodėl tai svarbu Komponentai + props yra Vue architektūros pagrindas — jūs sudarote UI iš pakartotinai naudojamų komponentų ir juos konfigūruojate per props. Supratimas, kad props yra **vienkrypčiai ir tik skaitytini** (duomenys žemyn, įvykiai aukštyn), yra pagrindinė mentalioji modelis, kuri išlaiko Vue programas nuspėjamomis; props mutavimas arba dvikrypčio props srauto tikėjimasis yra klasikinis klaidų šaltinis.