Pojmenované sloty

Panel má pro obsah jedno místo. Nabídka potřebuje karty se třemi místy: nahoře nadpis, uprostřed cenu a dole tlačítko, každé ve vlastní části karty a s čárami mezi nimi. Komponenta může mít slotů víc, když jim dá jména. Tady je Karta.vue:

<template>
    <article class="karta">
        <header>
            <slot name="zahlavi" />
        </header>
        <div class="obsah">
            <slot />
        </div>
        <footer>
            <slot name="zapati" />
        </footer>
    </article>
</template>

<slot> bez jména je výchozí slot. Pojmenovaný slot rodič vyplní pomocí <template> s # a jménem slotu:

<Karta>
    <template #zahlavi>
        <h2>Mrkvový dort</h2>
    </template>
    <p>85 Kč</p>
    <template #zapati>
        <button>Přidat</button>
    </template>
</Karta>

Samotné prvky <template> na stránce nejsou, jen jejich obsah: nadpis přijde do header karty a tlačítko do jejího footer. Odstavec není v žádném <template #…>, takže přijde do výchozího slotu. Na pořadí v rodiči nezáleží: kam která část patří, rozhoduje šablona karty.

Jména slotů si volíte sami, stejně jako jména props. Tady jsou česká, zahlavi a zapati, takže se nepletou s prvky HTML header a footer, do kterých je karta dává.

#zahlavi je zkratka pro v-slot:zahlavi, stejně jako je @click zkratka pro v-on:click. V cizím kódu uvidíte obojí, tento kurz používá #. A výchozí slot se jmenuje default, takže jeho obsah může být i v <template #default>.

Proč slot pro nadpis, když panel měl props nadpis? Na krátký text props stačí. Tady má ale nadpis vedle názvu ještě štítek s kategorií a jiná karta by tam mohla mít obrázek. Platí jednoduché pravidlo: data a krátké texty patří do props, kusy stránky do slotů. Komponenta může mít obojí, jako to má panel.

Typické chyby:

• Obsah pro pojmenovaný slot, který není v <template #…>. Přijde do výchozího slotu, takže se ukáže uprostřed karty.
• Jiné jméno v kartě a v rodiči, třeba <slot name="zapati" /> a <template #paticka>. Pojmenovaný slot, který nic nevyplní, zůstane prázdný, a obsah pro slot, který karta nemá, se neukáže, obojí bez varování.
• # na jiném prvku než <template>, třeba <button #zapati>. To je chyba v souboru: červený pruh pod náhledem ukáže, kde je, a napíše v-slot can only be used on components or <template> tags.