Na co se ve Vue používají sloty a jak fungují…

Sloty ve Vue se používají k vkládání obsahu zvenčí do komponent. To umožňuje vytvářet flexibilní a znovu použitelné komponenty.

Existují tři typy slotů:

Výchozí sloty (Default Slots): Používají se k vložení hlavního obsahu.

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

Použití:

<můj-komponent>
  <p>Tento obsah bude vložen do výchozího slotu.</p>
</můj-komponent>

Názvové sloty (Named Slots): Umožňují vkládání obsahu do konkrétních slotů uvnitř komponenty, odlišených podle názvu.

<template>
  <div>
    <slot name="header"></slot>
    <div>Hlavní obsah komponenty</div>
    <slot name="footer"></slot>
  </div>
</template>

Použití:

<můj-komponent>
  <template v-slot:header>
    <h2>Nadpis</h2>
  </template>
  <template v-slot:footer>
    <p>Patička</p>
  </template>
</můj-komponent>

Zkrácená syntaxe pro v-slot:

<můj-komponent>
  <template #header>
    <h2>Nadpis (zkrácená syntaxe)</h2>
  </template>
</můj-komponent>

Scoped Slots: Umožňují dětskému komponentu předávat data rodičovskému komponentu přes slot. Rodič může tato data použít při vykreslování obsahu slotu.

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

Použití:

<má-seznam :items="['Jablko', 'Banán', 'Pomeranč']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</má-seznam>

Destrukturalizace slotProps:

<má-seznam :items="['Jablko', 'Banán', 'Pomeranč']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrukturalizace)
  </template>
</má-seznam>

Sloty fungují tak, že vytvářejí "místa" uvnitř šablony dětského komponentu, kam může rodič vložit svůj vlastní obsah. Při vykreslování Vue nahradí <slot> (nebo <slot name="...">) obsahem, který poskytl rodičovský komponent. U scoped slotů jsou data z dětského komponentu dostupná přes objekt argumentů šablony slotu v rodičovském komponentu.

Na co se ve Vue používají sloty a jak fungují?