Blog

Vue.js'de "scoped slot" (kapsamlı yuva), bir bileşenin içeriğini dışarıdan gelen verilerle özelleştirmek için kullanılan bir özelliktir. Bu, bir ebeveyn bileşenin, çocuk bileşenin içeriğine veri aktarmasına olanak tanır. Temel olarak, ebeveyn bileşen, çocuk bileşenin slot'una belirli bir yapı (HTML, diğer bileşenler, vb.) ve veri gönderebilir.

Scoped slot'lar, Vue.js'te yeniden kullanılabilir bileşenler oluştururken esneklik sağlar. Bir bileşenin içeriği, ebeveyn bileşenden geçirilen verilere göre dinamik olarak değişebilir. Bu, birçok farklı durumda aynı bileşeni kullanma esnekliği sağlar.

Örnek kullanım:

1. Çocuk Bileşen: Çocuk bileşen bir <slot> etiketi içerir. Bu slot etiketi, scoped slot olarak işaretlenir ve çocuk bileşenden veri geçirmek için kullanılır.

               
   
                   
   
                       vue
                   
                   
   
                       
                           
   <!-- ChildComponent.vue -->
                           
   <template>
                           
   <div>
                           
   <slot :user="userData"></slot>
                           
   </div>
                           
   </template>
                           
   <script>
                           
   export default {
                           
   data() {
                           
   return {
                           
   userData: { name: 'John Doe', age: 30 }
                           
   };
                           
   }
                           
   };
                           
   </script>
                           
                   
               
             

2. Ebeveyn Bileşen: Ebeveyn bileşen, çocuk bileşenin slot'una kendi içeriğini ve verisini gönderir.

               
   
                   
   
                       vue
                   
                   
   
                       
                           
   <!-- ParentComponent.vue -->
                           
   <template>
                           
   <ChildComponent>
                           
   <template v-slot:default="slotProps">
                           
   <p>User Name: {{ slotProps.user.name }}</p>
                           
   <p>User Age: {{ slotProps.user.age }}</p>
                           
   </template>
                           
   </ChildComponent>
                           
   </template>
                           
   
                           
   import ChildComponent from './ChildComponent.vue';
                           
   export default {
                           
   components: {
                           
   ChildComponent
                           
   }
                           
   };
                           
   </script>
                           
                   
               
             

Bu örnekte, ChildComponent bileşeni, kullanıcı verisini içeren bir slot sunar ve ParentComponent bu slot'u, veriyi göstermek için kendi HTML yapısıyla doldurur. Scoped slot kullanımı, bileşenler arası veri iletişimini ve yeniden kullanımı kolaylaştırır.