Do czego służą sloty w Vue i jak one działają…

Sloty w Vue służą do wstrzykiwania zawartości z zewnątrz do komponentów. Pozwala to na tworzenie elastycznych i wielokrotnego użytku komponentów.

Istnieją trzy typy slotów:

Sloty domyślne (Default Slots): Używane do wstawiania głównej zawartości.

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

Użycie:

<mój-komponent>
  <p>Ta zawartość zostanie wstawiona do slotu domyślnego.</p>
</mój-komponent>

Sloty nazwane (Named Slots): Pozwalają na wstawianie zawartości do konkretnych slotów w komponencie, rozróżnianych po nazwie.

<template>
  <div>
    <slot name="header"></slot>
    <div>Główna zawartość komponentu</div>
    <slot name="footer"></slot>
  </div>
</template>

Użycie:

<mój-komponent>
  <template v-slot:header>
    <h2>Tytuł</h2>
  </template>
  <template v-slot:footer>
    <p>Stopka</p>
  </template>
</mój-komponent>

Skrócona składnia dla v-slot:

<mój-komponent>
  <template #header>
    <h2>Tytuł (skrócona składnia)</h2>
  </template>
</mój-komponent>

Scoped Slots (Sloty z zakresem): Pozwalają komponentowi potomnemu przekazywać dane do komponentu nadrzędnego za pomocą slotu. Nadrzędny komponent może używać tych danych podczas renderowania zawartości slotu.

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

Użycie:

<moja-lista :items="['Jabłko', 'Banan', 'Pomarańcza']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</moja-lista>

Destrukturyzacja slotProps:

<moja-lista :items="['Jabłko', 'Banan', 'Pomarańcza']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrukturyzacja)
  </template>
</moja-lista>

Sloty działają, tworząc "miejsca" w szablonie komponentu potomnego, do których rodzic może wstawić własną zawartość. Podczas renderowania Vue zamienia tag <slot> (lub <slot name="...">) na zawartość dostarczoną przez komponent rodzica. W przypadku scoped slots, dane z komponentu potomnego są dostępne przez obiekt argumentów szablonu slotu w komponencie rodzica.

Do czego służą sloty w Vue i jak one działają?