Sloty komponent

U komponent by se nám často hodilo předat data jako obsah tagu podobně, jako to je řešené v HTML.

Například:

<alert-box>
    Něco se pokazilo.
</alert-box>

A chceme, aby se vykreslilo něco jako:

Chyba! Něco se pokazilo.

Tento případ můžeme vyřešit velmi jednoduše pomocí <slot> elementu uvnitř komponenty:

Vue.component('alert-box', {
    template: `<div class="alert alert-danger">
        <strong>Chyba!</strong>
        <slot></slot>
    </div>`
})

Jak vidíte sami, stačí jednoduše přidat <slot> na místo, kde chceme, aby se vykreslil obsah a to je vše.

Předávání obsahu do komponent pohledem SEO

Obsah předávaný pomocí slotů vyhledávače vidí přímo ve zdrojovém kódu, protože se chová přesně tak, jako kdyby se jednalo o neznámý HTML element, který obklopuje text.

Na obsahových stránkách, kde vykreslujeme obsah například do grafických boxů je velmi výhodné obsah článku vykreslit přímo do HTML (kvůli vyhledávačům i výkonu) a nechat Vue, aby vykreslilo hezké grafické zobrazení.

Poznámka: Obsah bez aktivního Vue a vypnutého javascriptu nemusí vypadat dobře. Vyhledávače jsou stroje a záleží zejména na obsahu konkrétních klíčových slov v dokumentu. Vue používáme pro lepší uživatelský zážitek.

Pokud obsah stahujeme ajaxem, tak ho vyhledávače nemusí vidět. Google umí spouštět a vykreslovat javascript, nicméně nikdy bychom neměli důležitý obsah nechat pro uživatele skrytý a zobrazit například až po kliknutí na tlačítko.