A Vue-ban a slotokat mire használják és hogyan…

A Vue-ban a slotokat arra használják, hogy külső tartalmat szúrjunk be komponensekbe. Ez lehetővé teszi rugalmas és újrahasznosítható komponensek létrehozását.

Három típusú slot létezik:

Alapértelmezett slotok (Default Slots): Ezeket a fő tartalom beszúrására használjuk.

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

Használat:

<az-en-komponensem>
  <p>Ez a tartalom az alapértelmezett slotba kerül.</p>
</az-en-komponensem>

Névre szóló slotok (Named Slots): Lehetővé teszik, hogy tartalmat szúrjunk be a komponensen belüli konkrét slotokba, nevekkel megkülönböztetve.

<template>
  <div>
    <slot name="header"></slot>
    <div>A komponens fő tartalma</div>
    <slot name="footer"></slot>
  </div>
</template>

Használat:

<az-en-komponensem>
  <template v-slot:header>
    <h2>Címsor</h2>
  </template>
  <template v-slot:footer>
    <p>Lábléc</p>
  </template>
</az-en-komponensem>

Rövid szintaxis a v-slot-hoz:

<az-en-komponensem>
  <template #header>
    <h2>Címsor (rövid szintaxis)</h2>
  </template>
</az-en-komponensem>

Scoped Slots (Hatókörrel rendelkező slotok): Lehetővé teszik, hogy a gyermek komponens adatokat továbbítson a szülő komponensnek a sloton keresztül. A szülő ezeket az adatokat felhasználhatja a slot tartalmának renderelésekor.

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

Használat:

<az-en-listám :items="['Alma', 'Banán', 'Narancs']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</az-en-listám>

A slotProps destrukturálása:

<az-en-listám :items="['Alma', 'Banán', 'Narancs']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrukturálás)
  </template>
</az-en-listám>

A slotok úgy működnek, hogy "helyeket" hoznak létre a gyermek komponens sablonjában, ahová a szülő beillesztheti saját tartalmát. A renderelés során a Vue a <slot> (vagy <slot name="...">) tageket a szülő által biztosított tartalomra cseréli. Scoped slotok esetén a gyermek komponens adatai elérhetőek a slot sablon argumentum objektumán keresztül a szülő komponensben.

A Vue-ban a slotokat mire használják és hogyan működnek?