Pentru ce sunt folosite sloturile în Vue și cum…

Sloturile în Vue sunt utilizate pentru a injecta conținut din exterior în componente. Acest lucru permite crearea de componente flexibile și reutilizabile.

Există trei tipuri de sloturi:

Sloturi implicite (Default Slots): Sunt folosite pentru a insera conținut principal.

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

Utilizare:

<componente-meu>
  <p>Acest conținut va fi inserat în slotul implicit.</p>
</componente-meu>

Sloturi numite (Named Slots): Permite inserarea de conținut în sloturi specifice din interiorul componentei, diferențiate după nume.

<template>
  <div>
    <slot name="header"></slot>
    <div>Conținut principal al componentei</div>
    <slot name="footer"></slot>
  </div>
</template>

Utilizare:

<componente-meu>
  <template v-slot:header>
    <h2>Titlu</h2>
  </template>
  <template v-slot:footer>
    <p>Subsol</p>
  </template>
</componente-meu>

Sintaxă scurtă pentru v-slot:

<componente-meu>
  <template #header>
    <h2>Titlu (sintaxă scurtă)</h2>
  </template>
</componente-meu>

Scoped Slots: Permite componentului copil să transmită date către componentul părinte prin slot. Părintele poate utiliza aceste date la randarea conținutului slotului.

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

Utilizare:

<lista-mea :items="['Măr', 'Banana', 'Portocală']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</lista-mea>

Destructurarea slotProps:

<lista-mea :items="['Măr', 'Banana', 'Portocală']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destructurare)
  </template>
</lista-mea>

Sloturile funcționează creând "locuri" în interiorul șablonului componentului copil, unde părintele poate insera propriul conținut. La randare, Vue înlocuiește eticheta <slot> (sau <slot name="...">) cu conținutul furnizat de componentul părinte. În cazul sloturilor cu scop, datele din componentul copil sunt disponibile prin obiectul argumentelor șablonului slot în componentul părinte.

Pentru ce sunt folosite sloturile în Vue și cum funcționează?