İçeriğe geç

Slot Nedir?

VueJS
  • 2 dk okuma
Slot Nedir?

Vue.js'de "slot" kavramı, bileşenler arasında içerik dağıtımını sağlamak için kullanılır. Slotlar, bir bileşenin şablonunda tanımlanır ve bu slotları kullanan ebeveyn bileşenler tarafından doldurulabilirler. Bu, bileşenler arası içerik entegrasyonunu daha esnek ve yeniden kullanılabilir hale getirir.

İşte Vue.js slotlarının temel özellikleri:

  1. Varsayılan Slotlar: Eğer bir bileşenin şablonunda <slot></slot> etiketi kullanılmışsa, bu, ebeveyn bileşenlerin içeriğini kabul edebileceği bir yer olduğunu gösterir. Ebeveyn bileşen içeriği, slot etiketi arasına yerleştirilir.

  2. İsimlendirilmiş Slotlar: Slotlara isim vermek, daha spesifik içerik yerleştirme imkanı sunar. Örneğin, <slot name="header"></slot> şeklinde bir tanımlama yaparak, ebeveyn bileşenlerin sadece header isimli slot için özel içerik sağlamasına izin verebilirsiniz.

  3. Scope Slotlar: Bu slot türü, çocuk bileşenden veri almak ve bu verileri ebeveyn bileşenin şablonunda kullanmak için kullanılır. Scope slotlar sayesinde, bileşenler arasında daha dinamik bir veri akışı sağlanabilir.

  4. Fallback İçerik: Bir slot için ebeveyn bileşenden herhangi bir içerik sağlanmadığında gösterilecek varsayılan içeriği belirleyebilirsiniz.

Vue.js slotlarını kullanmak, bileşenlerin esnekliğini ve yeniden kullanılabilirliğini artırır, ve genellikle daha temiz ve anlaşılır kod yapısı sağlar. Bu özellik, özellikle büyük ve karmaşık uygulamalar geliştirirken çok yararlı olabilir.

Aşağıdaki örnekte BaseCard bileşeni bir isimli slot (header), bir varsayılan slot ve her ikisi için yedek (fallback) içerik tanımlıyor. İkinci kart hiç içerik almadığı için yedek metinleri gösterir:

Vue
<template>
  <base-card>
    <template #header>Kartın başlığı</template>
    Bu metin varsayılan slota yerleşir.
  </base-card>
  <base-card />
</template>

<script>
const BaseCard = {
  template: `
    <div class="card">
      <h3><slot name="header">Varsayılan başlık</slot></h3>
      <p><slot>İçerik verilmediğinde bu yedek metin görünür.</slot></p>
    </div>
  `,
};

export default {
  components: { BaseCard },
};
</script>

<style>
.card {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid #444;
  border-radius: 8px;
}
</style>

Bu yazıyla ilgili bir sorunuz mu var? Bana yazın

İlgili yazılar