Vue'da slotlar ne işe yarar ve nasıl çalışırlar…

Vue'de slotlar, dışarıdan içerik enjekte etmek için kullanılır. Bu, esnek ve yeniden kullanılabilir bileşenler oluşturmayı sağlar.

Üç tür slot vardır:

Varsayılan Slotlar (Default Slots): Ana içeriği eklemek için kullanılır.

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

Kullanım:

<benim-bilesen>
  <p>Bu içerik varsayılan slota eklenecek.</p>
</benim-bilesen>

İsimlendirilmiş Slotlar (Named Slots): Bileşenin belirli slotlarına, isimleriyle ayırt edilen içerik eklemeye olanak tanır.

<template>
  <div>
    <slot name="header"></slot>
    <div>Bileşenin ana içeriği</div>
    <slot name="footer"></slot>
  </div>
</template>

Kullanım:

<benim-bilesen>
  <template v-slot:header>
    <h2>Başlık</h2>
  </template>
  <template v-slot:footer>
    <p>Altbilgi</p>
  </template>
</benim-bilesen>

v-slot için kısaltma sözdizimi:

<benim-bilesen>
  <template #header>
    <h2>Başlık (kısaltma sözdizimi)</h2>
  </template>
</benim-bilesen>

Scoped Slots (Kapsamlı Slotlar): Çocuk bileşen, slot aracılığıyla ebeveyn bileşene veri aktarabilir. Ebeveyn, bu verileri slot içeriğini render ederken kullanabilir.

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

Kullanım:

<benim-listem :items="['Elma', 'Muz', 'Portakal']">
  <template v-slot:default="slotProps">
    {{ slotProps.index + 1 }}. {{ slotProps.item }}
  </template>
</benim-listem>

slotProps'un destrüktürasyonu:

<benim-listem :items="['Elma', 'Muz', 'Portakal']">
  <template v-slot="{ item, index }">
    {{ index + 1 }}. {{ item }} (Destrüktürasyon)
  </template>
</benim-listem>

Slotlar, çocuk bileşenin şablonunda "yerler" oluşturarak çalışır ve ebeveyn, kendi içeriğini bu yerlere enjekte edebilir. Render sırasında Vue, <slot> (veya <slot name="...">) etiketini, ebeveyn bileşen tarafından sağlanan içerikle değiştirir. Scoped slotlar durumunda, çocuk bileşenden gelen veriler, ebeveyn bileşende slot şablatının argüman nesnesi aracılığıyla erişilebilir.

Vue'da slotlar ne işe yarar ve nasıl çalışırlar?