Named Slot Nedir?

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:

<!-- 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.

Bu slotları tanımlayan ChildComponent bileşeni ise şöyle görünür:

<!-- ChildComponent.vue -->
<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

İsimsiz <slot> öğesi "default" slottur. Kısaltma olarak v-slot:header yerine #header da yazılabilir.