Na čo sa v Vue používajú sloty a ako fungujú…

Vo Vue sa sloty používajú na vkladanie obsahu zvonku do komponentov. To umožňuje vytvárať flexibilné a znovu použiteľné komponenty.

Existujú tri typy slotov:

Predvolené (Default Slots): Používajú sa na vloženie hlavného obsahu.

<template>
  <div>
    <slot></slot>
  </div>
</template>

Použitie:

<my-component>
  <p>Tento obsah bude vložený do predvoleného slotu.</p>
</my-component>

Menované sloty (Named Slots): Umožňujú vkladať obsah do konkrétnych slotov vnútri komponentu, odlišujúcich sa podľa mena.

<template>
  <div>
    <slot name="header"></slot>
    <div>Hlavný obsah komponentu</div>
    <slot name="footer"></slot>
  </div>
</template>

Použitie:

<my-component>
  <template v-slot:header>
    <h2>Nadpis</h2>
  </template>
  <template v-slot:footer>
    <p>Pätka</p>
  </template>
</my-component>

Skrátená syntax pre v-slot:

<my-component>
  <template #header>
    <h2>Nadpis (skrátená syntax)</h2>
  </template>
</my-component>

Scoped sloty (Scoped Slots): Umožňujú dieťaťu komponentu odovzdať údaje rodičovi prostredníctvom slotu. Rodič môže tieto údaje použiť pri vykresľovaní obsahu slotu.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item" :index="index"></slot>
    </li>
  </ul>
</template>

Použitie:

<my-list :items="['Apple', 'Banana', 'Orange']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</my-list>

Destrukturalizácia slotProps:

<my-list :items="['Apple', 'Banana', 'Orange']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrukturalizácia)
  </template>
</my-list>

Sloty fungujú tak, že vytvárajú "miesta" v šablóne dieťaťa, kam rodič môže vložiť svoj vlastný obsah. Pri renderovaní Vue nahradí <slot> (alebo <slot name="...">) obsahom, ktorý poskytol rodič. Pri scoped slotoch sú údaje z dieťaťa dostupné prostredníctvom objektu argumentu šablóny slotu v rodičovskej komponenty.

Na čo sa v Vue používajú sloty a ako fungujú?