Komponenty ve Vue.js - Jak na to

Komponentový systém je nejdůležitější a nejvíce propracovaná část Vue.js, díky které můžete jednotlivé části stránky rozdělit do komponent, ty nezávisle na sobě vyvíjet a nakonec z nich celou aplikaci složit.

Vlastnosti komponent:

  • Nesou si vlastní šablonu (HTML), data i aplikační logiku
  • Mohou být použity všude a jakýmkoli způsobem
  • Jednoduše přijímají a zobrazují data

Při správném návrhu vašeho webu může být rozdělen do stromu třeba tímto způsobem:

Komponentový model

Obrázek byl převzat z oficiální anglické dokumentace

Co je Vue komponenta

Ve Vue je komponenta v podstatě instance Vue s předdefinovanými vlastnostmi. Stačí ji proto jednoduše zaregistrovat a můžeme ji ihned použít. Každé použití komponenty vytvoří v době vykreslí novou instanci - díky tomuto přístupu opakování jedné komponenty na více místech způsobí, že se každá chová nezávisle (izolovaně) a drží si svůj stav.

Komponenty musíme definovat ještě před vytvořením instance samotné Vue aplikace:

Vue.component('todo-item', {
    template: '<li>Toto je poznámka.</li>'
});

var app = new Vue(...)

Nyní máme definovanou komponentu s názvem todo-item. Všimněte si, že uvnitř obsahuje property template, kde je uložena její šablona.

Ve stránce ji pak vykreslíme jednoduše:

<ol>
    <!-- Vytvoří instanci komponenty todo-item -->
    <todo-item></todo-item>
</ol>

Stejným způsobem je možné komponentu vložit i do jiné komponenty a takto je řetězit do stromu.

Víceřádková šablona a vložení více elementů

Pokud potřebujeme vložit šablonu s více řádky, použijeme znak zpětné uvozovky:

Vue.component('todo-item', {
    template: `<div>
        Toto je poznámka.
    </div>`
});

var app = new Vue(...)

Pro komponentu je také důležité, aby vždy obsahovala na nejnižší úrovni právě jeden element. Pokud potřebujeme v komponentě vykreslit například 2 položky pod sebou, je potřeba je nejprve obalit například do divu:

Vue.component('todo-item', {
    template: `<div>
        <span>Toto je poznámka.</span>
        <span class="text-success">A toto potvrzující zpráva.</span>
    </div>`
});

var app = new Vue(...)

Předání dat do komponenty

Většinou se komponenty používají pro vykreslení dat do určité podoby, kterou určuje komponenta. Aby to bylo možné, je potřeba data předat do správné instance komponenty, aby aplikace věděla, kde se má co zobrazit.

Vue k tomu využívá syntaxi atributů, kterou už znáte z jazyka HTML. Do komponenty se data poté předávají jako proměnné:

Vue.component('todo-item', {
    props: ['todo'],
    template: '<span>{{ todo.text }}</span>'
})

Při použití komponenty v šabloně pak stačí data jednoduše předat přes v-bind:

<div id="app">
    <todo-item v-for="item in todos" v-bind:todo="item"></todo-item>
</div>

Celá ukázka pak může vypadat například:

<div id="app">
    <todo-item v-for="item in todos" v-bind:todo="item"></todo-item>
</div>

<script>
Vue.component('todo-item', {
    props: ['todo'],
    template: '<span>{{ todo.text }}</span>'
});

var app = new Vue({
    el: '#app',
    data: {
        todos: [
            {
                text: 'Naučit se javascript'
            },
            {
                text: 'Naučit se Vue.js'
            },
            {
                text: 'Udělat něco hezkého. :)'
            }
        ]
    }
})
</script>

Struktura celé aplikace nebo webu

Při návrhu větší aplikace nebo layoutu webu je dobrý nápad vymyslet nejprve jednotlivé komponenty a pak z nich skládat strukturu webu.

V hlavní šabloně poté můžete mít jen velmi obecnou informaci o struktuře.

Od teď budou vaše aplikace vypadat například:

<div id="app">
    <app-nav></app-nav>
    <app-view>
        <app-sidebar></app-sidebar>
        <app-content></app-content>
    </app-view>
</div>

A o zbytek se postará Vue a její komponenty.