Miten komponentit ja propsit toimivat Vue:ssa?

Question

Accepted Answer

**Komponentit** ovat uudelleenkäytettäviä, itsenäisiä UI-palikoita. **Propsit** ovat tapa, jolla vanhempi lähettää dataa *alas* lapselleen — ne ovat lapsen tyypitettyjä, vain luku -merkinnällä varustettuja syötteitä. ## Propsien määrittäminen lapsessa ```vue ``` ## Propsien välittäminen vanhemmasta ```vue ``` Huomaa ero: `name="Ann"` välittää kirjaimellisen merkkijonon, kun taas `:age="30"` (jossa `v-bind`) arvioi lausekkeen — tarpeen numeroille, booleille, objekteille tai muuttujille. Huomaa myös, että propien nimet ovat `camelCase` JavaScriptissä, mutta `kebab-case` malleissa (`isAdmin` → `:is-admin`). ## Propsit ovat yksisuuntaisia ja vain luku -merkinnällä varustettuja ```js props.name = "Bob"; // ❌ Vue warns — never mutate a prop ``` Data virtaa **alas** (vanhempi → lapsi). Lapsi ei saa muuttaa omia propsejaan; jos sen on muutettava jotakin, se joko käyttää paikallista kopiota tai **lähettää tapahtuman**, joka pyytää vanhempaa muuttamaan lähteen ("propsit alas, tapahtumat ylös"). Tämä yksisuuntainen virta pitää datan ennakoitavana. ## TypeScript propsit ```vue ``` ## Miksi sillä on väliä Komponentit + propsit ovat Vue-arkkitehtuurin perusta — kootaan UI:ta uudelleenkäytettävistä komponenteista ja määritetään ne propsien kautta. Ymmärtäminen siitä, että propsit ovat **yksisuuntaisia ja vain luku -merkinnällä varustettuja** (data alas, tapahtumat ylös), on perusmallimalli, joka pitää Vue-sovellukset ennakoitavina; propsien muuttaminen tai kaksisuuntaisen propsien virtauksen odottaminen on klassinen virheiden lähde.