A cosa servono gli slot in Vue e come funzionano…

Gli slot in Vue vengono utilizzati per inserire contenuto dall'esterno nei componenti. Questo permette di creare componenti flessibili e riutilizzabili.

Esistono tre tipi di slot:

Slot predefiniti (Default Slots): Utilizzati per inserire contenuto principale.

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

Uso:

<mio-componente>
  <p>Questo contenuto verrà inserito nello slot predefinito.</p>
</mio-componente>

Slot nominati (Named Slots): Permettono di inserire contenuto in slot specifici all'interno del componente, differenziati per nome.

<template>
  <div>
    <slot name="header"></slot>
    <div>Contenuto principale del componente</div>
    <slot name="footer"></slot>
  </div>
</template>

Uso:

<mio-componente>
  <template v-slot:header>
    <h2>Titolo</h2>
  </template>
  <template v-slot:footer>
    <p>Piede di pagina</p>
  </template>
</mio-componente>

Sintassi abbreviata per v-slot:

<mio-componente>
  <template #header>
    <h2>Titolo (sintassi abbreviata)</h2>
  </template>
</mio-componente>

Slot con ambito limitato (Scoped Slots): Permettono al componente figlio di trasmettere dati al componente genitore tramite lo slot. Il genitore può usare questi dati durante il rendering del contenuto dello slot.

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

Uso:

<mia-lista :items="['Mela', 'Banana', 'Arancia']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</mia-lista>

Destrutturazione di slotProps:

<mia-lista :items="['Mela', 'Banana', 'Arancia']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrutturazione)
  </template>
</mia-lista>

I slot funzionano creando "posti" all'interno del template del componente figlio, dove il genitore può inserire il proprio contenuto. Durante il rendering, Vue sostituisce il tag <slot> (o <slot name="...">) con il contenuto fornito dal componente genitore. Nel caso degli slot con ambito, i dati del componente figlio sono disponibili tramite l'oggetto degli argomenti del template dello slot nel componente genitore.

A cosa servono gli slot in Vue e come funzionano?