Vue Slot Kullanımı

Bu yazıda Vue3'te slotu nasıl kullanabiliriz örneklerle açıklamaya çalışacağım.

User parentten child’a datayı göndererek child componentinde bir listeleme işlemi yapmak isterse propsları kullanarak bu işlemi yapabilir.

ParentComponent.vue

<template>
    <div>
        <ChildComponent :nameList="nameList"></ChildComponent>
    </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default({
    data() {
      return {
        nameList:[{nick:'Seda'},{nick:'Şeker'}]
      }
    },
    components:{
        ChildComponent
    }
})
</script>

ChildComponent.vue

<template>
    <div>
        <ul>
            <li v-for="(user,index) in users" :key="index">
                {{user.nick}}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['nameList'],
    data() {
        const users = this.$props.nameList
        return {users}
    }
}
</script>

Peki parenttan hiç data transferi yapmadan bu işlemi nasıl gerçekleştiririz diye soracak olursanız bu noktada devreye slotlar giriyor.

ParentComponent.vue

<template>
    <div>
        <ChildComponent>
            <template #default>
                <ul>
                    <li v-for="(name, index) in nameList" :key="index">
                      <span>{{ name.nick}} </span>
                    </li>
                  </ul>
            </template>
           
        
        </ChildComponent>
    </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default({
    data() {
      return {
        nameList:[{nick:'Seda'},{nick:'Şeker'}]
      }
    },
    components:{
        ChildComponent
    }
})
</script>

ChildComponent.vue

<template>
    <div>
       <slot></slot>
    </div>
</template>
<script>
export default({
})
</script>

İşte bu kadar child componentimiz üzerinde herhangi bir işlem yapmadan data transferiyle uğraşmadan sadece import edip slot kullanarak listeleme işlemini gerçekleştirebiliriz.

İşlemleri biraz daha kompleksleştirip slot propslardan ve birden fazla slot kullanımı için de örneklendirme yapacağım. Bu işlemde parenttan child’a data transferi yapacağız aynı zamanda child componentinden de parent’a data gelmiş olacak yani props ve slot propsların kullanımını birlikte görmüş olacağız.

ParentNameComponent.vue

<template>
  <div>
    <ChildForNameSlot :userList="userList"> 
        <template #header>
            Header
        </template>
        <template v-slot:content="{user}">
            <span> {{user.name}} rating {{user.rating}}</span>
        </template>
    </ChildForNameSlot>
  </div>
</template>
<script>
import ChildForNameSlot from "./ChildForNameSlot.vue";
export default {
  components: {
    ChildForNameSlot,
  },
  data() {
    const userList = [
      { name: "Seda", rating: 3 },
      { name: "Şeker", rating: 5 },
    ];
    return {
      userList,
    };
  },
};
</script>

ChildForNameSlot.vue

<template>
    <div>
        <h3>
            <slot name="header"></slot>
        </h3>
        <ul>
            <li v-for="(user,index) in users" :key="index">
                <slot name="content" :user="user"></slot>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['userList'],
    data() {
        const users = this.$props.userList
        return {users}
    }
}
</script>

Parent’tan Child’a props kullanarak userListi gönderdik bu kez listeleme işleminin sadece içerik kısmını ve header bilgisini parent componentine bıraktık.

Child componentinde iki ayrı slot tanımladık header ve content. Bu slotları parent componentinde <template #slotName></template> ile çağırabilirsiniz iki farklı slotumuz olduğu için childda iki template açtık ve içerisinde child componentinde ne göstermek istiyorsak onları yazdık.

Slot props kullanımı ise propslara çok benziyor. Slotlarımızı tanımladığımız child componentinde göndereceğimiz değeri tanımlıyoruz “:” lı kısım çağırıldığı yerde kullanacağımız ismi temsil ediyor “=” lik sonrası ise göndereceğimiz değerin kendisi. Parent componentinde v-slot:slotName ile değerimizi alabiliriz.

İkinci örnekte child componentinde slot içerinde göstermek istediğiniz değeri de yazabilirsiniz parentta yaptığınız tanımlama ile oradaki değeri değiştirmiş olursunuz. Kod üzerinde de bakalım

ParentForNameSlot.vue

<template>
  <div>
    <ChildForNameSlot :userList="userList"> 
        <template v-slot:content="{user}">
            <span> {{user.name}} rating {{user.rating}}</span>
        </template>
    </ChildForNameSlot>
  </div>
</template>
<script>
import ChildForNameSlot from "./ChildForNameSlot.vue";
export default {
  components: {
    ChildForNameSlot,
  },
  data() {
    const userList = [
      { name: "Seda", rating: 3 },
      { name: "Şeker", rating: 5 },
    ];
    return {
      userList,
    };
  },
};
</script>

<template>
    <div>
        <h3>
            <slot name="header">
                <h3>Header in slot</h3>
            </slot>
        </h3>
        <ul>
            <li v-for="(user,index) in users" :key="index">
                <slot name="content" :user="user"></slot>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    props:['userList'],
    data() {
        const users = this.$props.userList
        return {users}
    }
}
</script>

Yukarıdaki kodun çıktısı olarak header bilgimiz “Header in slot” olarak görülür ama siz bunun görünmesini istemezseniz ParentForNameSlot.vue dosyasında bir <template #header>Header</template> yazarak render olan değeri “Header” yapabilirsiniz.

Temel olarak slot,slot propslar bu şekilde kullanılıyor ihtiyaçlarımıza göre bu örnekleri arttırabiliriz. Tamamen kendi senaryomuzda nasıl bir çıktı görmek istiyorsak o şekilde yapıyı değiştirebiliriz.