Blog

Named Slot Nedir?
06

Ocak

  • 06 Ocak 2024
  • Yorum

Vue.js'de "named slot" (isimlendirilmiş slot), bir bileşenin farklı içerikler alabilmesi için kullanılan bir yapıdır. Standart slotlar, bileşenler arası içerik aktarımı sağlarken, named slotlar bu işlemi daha düzenli ve kontrollü bir şekilde yapmanıza olanak tanır.

Bir bileşenin birden fazla slotuna özel içerik yerleştirmek istediğinizde, her bir slot için bir isim belirleyerek, hangi içeriğin hangi slota gideceğini belirleyebilirsiniz. Bu, özellikle karmaşık bileşenlerde içeriği düzenli tutmak için çok yararlıdır.

Örnek olarak:

  

      

          html
      

      

          
              
<!-- ParentComponent.vue -->

              
<template>

              
<ChildComponent>

              
<template v-slot:header>

              
<h1>Bu başlık için özel içerik</h1>

              
</template>

              
<template v-slot:default>

              
<p>Bu varsayılan slot içeriği</p>

              
</template>
      
              
<template v-slot:footer>
    
              
<footer>Bu footer için özel içerik</footer>

              
</template>
    
              
</ChildComponent>
      
              
</template>

Bu örnekte, ChildComponent isimli bir bileşen üç farklı named slot (header, default, footer) içeriyor. Ebeveyn bileşen, bu slotları <template v-slot:slot_adı> şeklinde kullanarak her birine özel içerik sağlayabiliyor. Bu sayede, ChildComponent içerisinde bu slotların hangi içeriği göstereceğini kolaylıkla yönetebilirsiniz.

İLK SEN YORUM YAP

E-posta hesabınız yayımlanmayacak.*

Kategoriler

Son Yazılar

E-BÜLTEN