3. diel - Dáta a Props v komponentoch

V minulej lekcii, Komponenty vo VueJS , sme sa zoznámili s Vue komponentmi, ich štruktúrou a použitím v aplikácii. Vytvorili sme prvý Vue komponenty, ktoré budeme v našej kalkulačke ďalej používať.

Dnes naplníme naše komponenty dátami. Naučíme sa zobrazovať dáta v šablónach, odovzdávať dáta z rodičovských do dcérskych komponentov a validovať ich.

Dáta

Zelené polia v prvom riadku našej kalkulačky bude zobrazovať text. Tak, ako bude používateľ klikať na tlačidlá, bude sa v zelenom poli objavovať číslo, ktoré má byť prvým členom aritmetické operácie. Text bude ďalej obsahovať operátor a potom druhé číslo. Nakoniec sa za text ešte zaradí znamienko rovnosti a vypočítaný výsledok.

Je teda zrejmé, že vo vnútri komponenty TheLayout budeme potrebovať premennú, do ktorej budeme priebežne ukladať zobrazovaný text, a hodnotu tejto premennej budeme potrebovať zobrazovať v šablóne. Vue nám na tento účel ponúka súčasť konfiguračného objektu s názvom dáta.

V prvom rade si povedzme, že data sú metódou, nie vlastností konfiguračného objektu. Dáta skrátka musí byť funkciou, je to syntaktická podmienka frameworku VueJS. Táto funkcia musí vracať objekt, ktorého vlastnosťami sú jednotlivé ukazovatele, ktoré potrebujeme zobraziť v šablóne alebo s nimi ďalej pracovať v metódach danej komponenty. Upravme skript komponenty TheLayout takto:

export default {
  name: 'TheLayout',
  data () {
    return {
      value: '0'
    }
  }
}

Premenná value teraz obsahuje textový reťazec "0" a je pripravená pre zobrazenie v šablóne.

Použitie dát v šablónach

Vo Vue zobrazujeme hodnoty premenných v šablóne pomocou zdvojených zložených zátvoriek takto {{ value }}. Vnútri zátvoriek môže byť akákoľvek hodnota premennej, ktorú pozná konfiguračné objekt komponenty, rovnako tak ľubovoľný javascriptový výraz.

kód:

<div>
{{ 1 + 2 }}</div>

nám teda v elemente <div> zobrazí hodnotu "3", kód:

<div>
{{ '1' + '2' }}</div>

zobrazí hodnotu string "12" a kód:

<div>
{{ value === 0 ? 'A' : 'B' }}</div>

zobrazí písmeno "A", ak je hodnotou premennej value číslo 0, alebo písmeno "B" vo všetkých ostatných prípadoch.

Je však dobrou praxou do šablón nepísať zložité výrazy, sťažuje to čitateľnosť kódu. Je všeobecne doporučované, aby aplikačné logika, a teda aj výpočet zobrazovaných hodnôt, bola obsiahnutá výlučne v skripte.

Vráťme sa k našej kalkulačke a upravme 5. riadok súboru TheLayout.vue takto:

<div class="display">{{ value }}</div>

V zelenom poli prvého riadku kalkulačky teraz uvidíme zobrazenú nulu.

Props

Jediné tlačidlo, ktoré naša kalkulačka zatiaľ obsahuje písmeno "C". Je tomu tak preto, že sme tento znak natvrdo nakódili do HTML šablóny. Isteže by sme mohli v komponente CalculatorButtons vytvoriť v rámci dát premennú, do ktorej by sme uložili text "C", a túto premennú potom zobrazovať v šablóne vyššie uvedeným spôsobom. To sa nám však príliš nehodí, potrebujeme totiž, aby tlačidlo zobrazovalo rôzne hodnoty, a to podľa toho, ako je nastavíme v rodičovskej komponente.

Potrebujeme teda nástroj, ktorý nám umožní odovzdávať dáta z rodičovských do dcérskych komponentov. Týmto nástrojom vo Vue sú tzv. Props.

Upravme skript komponenty CalculatorButton takto:

export default {
  name: 'CalculatorButton',
  props: [ 'displayValue' ]
}

A jediný riadok jej šablóny takto:

<div class="calculator-button">{{ displayValue }}</div>

Týmto sme vytvorili premennú v rámci Props, v ktorej budeme komponente odovzdávať potrebné dáta. V našom prípade teda znak, ktorý má byť zobrazený na tlačidle. Hodnotu displayValue potom zobrazujeme v šablóne.

V komponente TheLayout teraz upravme 6. riadok šablóny (hneď pod elementom s triedou display):

<calculator-button display-value="F"/>

Kalkulačka nám teraz na svojom jedinom tlačidle namiesto písmena "C" zobrazuje "F".

Všimnime si, že:

• Props sú definované ako pole obsahujúce textové reťazce - názvy jednotlivých premenných. Props môžu byť tiež definované ako objekt, o tom o kúsok neskôr v tejto lekcii.
• názvy premenných v definícii Props píšeme v CamelCase, tzv. velbloudíZápis.
• v rodičovskej komponente použijeme názov premennej ako HTML atribút a rovno mu priraďujeme hodnotu. Takto môžeme postupovať, priraďujeme ak prostý textový reťazec. Ak chceme dcérske komponente v rámci Props odovzdať iné dáta než obyčajný text, alebo hodnotu nejaké ukazovatele, je potrebné použiť direktívu v-bind.
• HTML kód nerozpoznáva v názvoch atribútov veľké a malé písmená, preto v rodičovskej komponente píšeme názov patričnej premennej Props v notáciu kebab-case. Preklad týchto dvoch rôznych notáciou pre nás automaticky obstará Vue.

Direktíva v-bind

Direktíva v-bind nám umožňuje nastaviť hodnotu HTML atribútov dynamicky. Uveďme si niekoľko príkladov:

<button v-bind:type="buttonType"></button>
<my-vue-component v-bind:important-value="100" v-bind:another-value="value"/>
<my-vue-component v-bind:greetings="['ahoj', 'čau']" v-bind:is-valid="false" />

Prvý riadok kódu nám nastavuje hodnotu atribútu type elementu <button> podľa hodnoty premennej buttonType. Ak obsahuje táto premenná napríklad text "button", bude prvý riadok zodpovedať zápisu:

<button type="button"></button>

Na druhom riadku priraďujeme do premennej importantValue, ktorá je súčasťou Props v komponente MyVueComponent, číselnú hodnotu 100 (nie string '100') a do ďalšej časti Props s názvom anotherValue priraďujeme obsah premennej value.

Na treťom riadku priraďujeme do premennej greetings, ktorá je súčasťou Props v komponente MyVueComponent, pole obsahujúce dva textové reťazce. Do ďalšej premenné isValid priraďuje booleanovskou hodnotu false.

Direktívu v-bind je možné písať aj skratkou, ktorou je samotná dvojbodka :. Namiesto v-bind:is-valid="false" môžeme teda skrátene písať iba :is-valid="false", obaja zápisy sú ekvivalentné. V ďalšom kódovanie sa budeme držať skráteného zápisu.

Objekt Props - kontrola dátových typov a validácia

Zatiaľ sme definovali Props ako obyčajné pole obsahujúce názvy jednotlivých premenných. Props však môžeme definovať aj ako objekt, napríklad:

props: {
  greeting: {
    type: String,
    default: 'ahoj'
  }
}

V kóde vyššie sme definovali prop s názvom greeting. Určili sme, že musí ísť o dátový typ String. Ak rodičovská komponent nepriradí do tejto prop žiadnu hodnotu, nastaví sa základná hodnota, ktorú bude textový reťazec "ahoj".

Kontrola dátových typov môže byť veľmi užitočná najmä v rozsiahlejších aplikáciách, kedy tak získavame kontrolu nad tým, aké dáta nám rodičovskej komponenty do dcérskych odovzdávajú. Hodnota vlastnosti type môže mať hodnotu názvu jedného z natívnych konštruktor v JavaScripte (String, Number, Boolean, Array, Object, Date, Function, Symbol). Ak je potom odovzdávaná komponente hodnota, ktorá nezodpovedá dátovému typu, Vue nám zobrazí na konzole varovné hlásenie.

V prípadoch, kedy nám prostá kontrola dátového typu nestačí, môžeme v Props definovať presnejšie validátor. Validátorom je funkcia, ktorá si berie ako parameter validovanou hodnotu a vracia true alebo false. Ak vráti false, potom Vue opäť zobrazuje chybové hlásenie. Príklad:

props: {
  greeting: {
    validator: (v) => v === null || typeof v === 'string',
    default: null
  }
}

Takto definujeme prop s názvom greeting, ktorá môže obsahovať buď textový reťazec alebo hodnotu null. Iné hodnoty prípustné nie sú. Ak rodičovská komponent hodnotu nenastaví, predvolenou hodnotou bude null.

Ďalším veľmi praktickým nastavením u Props je vlastnosť required:

props: {
  displayValue: {
    type: String,
    required: true
  }
}

Kódom vyššie definujeme prop displayValue, ktorá musí obsahovať textový reťazec a jej hodnota je povinná - musí byť rodičovskú komponentom nastavená. Keby sme ju nastaviť zabudli, opäť nás neminie varovná hláška na konzolu.

Ak sa vrátime k našej kalkulačke, potom zistíme, že vyššie uvedené nastavenie je presne to, ktoré pre zobrazovanú hodnotu tlačidlá potrebujeme. Musí to byť String, je to povinná hodnota a nemôžeme zadať žiadnu hodnotu predvolené. Použijeme teda vyššie uvedený kód v definícii Props komponenty CalculatorButton, ktorej skript teraz bude vyzerať takto:

export default {
  name: 'CalculatorButton',
  props: {
    displayValue: {
      type: String,
      required: true
    }
  }
}

Pre dnešný lekcii by to už stačilo:)

V ďalšej lekcii, Podmienky a cykly vo Vue.js , sa zoznámime s direktívami v-for, v-if, v-else, v-else-if a naučíme sa s ich pomocou zobrazovať HTML elementy a Vue komponenty podmienečne, respektíve v cykloch.