Komponenta se slotem

Na stránce kavárny je několik rámečků, které vypadají stejně: bílý rámeček s okrajem a nadpisem a v něm pokaždé něco jiného. Otevírací doba je odstavec, nabídka je seznam a objednávka je seznam s tlačítkem. Na ten rámeček by se hodila jedna komponenta, jenže s props tu nevystačíte. Props předávají hodnoty, třeba text nebo objekt, a tenhle rámeček má nést kus stránky.

K tomu má komponenta slot: místo ve své šabloně, které vyplní její rodič. Tady je Panel.vue, rámeček s nadpisem z props nadpis a se slotem pod nadpisem:

<script setup>
defineProps({
    nadpis: { type: String, required: true },
});
</script>

<template>
    <section class="panel">
        <h2>{{ nadpis }}</h2>
        <slot />
    </section>
</template>

Rodič komponentu napíše s otevíracím a zavíracím tagem a obsah dá mezi ně, stejně jako u prvku HTML:

<Panel nadpis="Otevírací doba">
    <p>Každý den od 7 do 19 hodin.</p>
</Panel>

Vue vykreslí šablonu panelu a na místo <slot /> dá ten obsah. Na stránce pak je:

<section class="panel">
    <h2>Otevírací doba</h2>
    <p>Každý den od 7 do 19 hodin.</p>
</section>

Obsahem může být cokoli, co byste napsali do šablony: text, několik prvků, seznam s v-for nebo i jiné komponenty. A pokaždé, když panel použijete, mu můžete dát jiný obsah.

Vaše komponenty zatím mezi svými tagy nic neměly, a tak jste je psali jako samouzavírací, třeba <PolozkaMenu />. A komponenta bez <slot /> s obsahem mezi svými tagy nic neudělá: Vue ho vynechá, a to bez varování. Když se obsah neukáže, zkontrolujte nejdřív, jestli má komponenta slot.