Waarvoor worden slots in Vue gebruikt en hoe werken…

Slots in Vue worden gebruikt om inhoud van buitenaf in componenten te injecteren. Dit maakt het mogelijk om flexibele en herbruikbare componenten te creëren.

Er zijn drie soorten slots:

Standaard Slots (Default Slots): Worden gebruikt om hoofdinhoud in te voegen.

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

Gebruik:

<mijn-component>
  <p>Deze inhoud wordt in de standaard slot geplaatst.</p>
</mijn-component>

Genummerde Slots (Named Slots): Stellen je in staat om inhoud in specifieke slots binnen een component te plaatsen, onderscheiden door naam.

<template>
  <div>
    <slot name="header"></slot>
    <div>Hoofdinhoud van de component</div>
    <slot name="footer"></slot>
  </div>
</template>

Gebruik:

<mijn-component>
  <template v-slot:header>
    <h2>Titel</h2>
  </template>
  <template v-slot:footer>
    <p>Voettekst</p>
  </template>
</mijn-component>

Verkorte syntax voor v-slot:

<mijn-component>
  <template #header>
    <h2>Titel (verkorte syntax)</h2>
  </template>
</mijn-component>

Scoped Slots: Hiermee kan een child component data doorgeven aan een parent component via de slot. De parent kan deze data gebruiken bij het renderen van de slot-inhoud.

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

Gebruik:

<mijn-lijst :items="['Appel', 'Banaan', 'Sinaasappel']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</mijn-lijst>

Destructurering van slotProps:

<mijn-lijst :items="['Appel', 'Banaan', 'Sinaasappel']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destructurering)
  </template>
</mijn-lijst>

Slots werken door "plaatsen" te creëren binnen de template van het child component, waar de parent zijn eigen inhoud kan plaatsen. Tijdens het renderen vervangt Vue de <slot> (of <slot name="...">) door de inhoud die door de parent component wordt geleverd. Bij scoped slots zijn de data van het child component beschikbaar via het argumentenobject van de slot-template in de parent component.

Waarvoor worden slots in Vue gebruikt en hoe werken ze?