VueJS 2: komponenty

Poslední dobou se prosazují webové komponenty (vysvětleno např. zde). Krátce řečeno, jsou to uživatelsky definované tagy pro HTML. Buď jen zobrazí určitý obsah nebo umí i reagovat na hodnoty atributů a/nebo na události.

Webové komponenty se dají skvěle psát i pomocí frameworku VueJS. Je k nim výborná, podrobná a srozumitelná dokumentace.

Vypůjčím si hotový příklad z dokumentace.

1. Registrace komponenty (definice)

Vue.component('my-component', {

  template: '<div>A custom component!</div>'

})

Název nové komponenty (HTML tagu) je my-component, tag se tedy zapíše <my-component> (samozřejmě je to párový tag).

Template je HTML šablona, neboli to, co se zobrazí v prohlížeči v místě, kde se použije komponenta.

2. Vytvoření instance VueJS

// create a root instance

new Vue({

  el: '#example'

})

3. Použití komponenty v HTML stránce

<div id="example">

  <my-component></my-component>

</div>

4. Výsledný kód v prohlížeči (zobrazená HTML stránka)

<div id="example">

  <div>A custom component!</div>

</div>

Na místě, kde je ve zdrojovém kódu zapsána komponenta <my-component></my-component> se zobrazí obsah šablony (to, co je definováno jako template).

Komponenty mohou mít i atributy, které mohou (nemusí) mít hodnoty. Také mohou reagovat na události.

Při psaní webových stránek a programování webových a hybridních mobilních aplikací se webové komponenty silně prosazují. Zpřehledňují kód a umožňují jednoduchým způsobem opakovaně použít již definovaný obsah a/nebo chování.