Slots
Vue.js'de Slots, bileşenlerin içerik yerleştirme ve yeniden kullanılabilirlik yeteneklerini artıran temel bir özelliktir. Bir bileşen, çocuk bileşeninin içinde boş bir alan bırakarak, ebeveyn bileşenin içerik eklemesine olanak tanır. Bu yaklaşım, modern yazılım mimarisinde modülerlik, bakım kolaylığı ve esnek tasarım prensipleri açısından kritik öneme sahiptir.
Slots, özellikle dinamik içerik gerektiren kartlar, modallar, tablolar ve formlar gibi bileşenlerde kullanışlıdır. Vue.js, üç ana Slot türü sunar: Varsayılan Slot (Default Slot), İsimlendirilmiş Slot (Named Slot) ve Kapsamlı Slot (Scoped Slot). Varsayılan Slot, ebeveyn içerik sağlamadığında devreye girer. İsimlendirilmiş Slot, bir bileşen içinde birden fazla içerik alanı tanımlamayı sağlar. Kapsamlı Slot ise çocuk bileşenden ebeveyn bileşene veri aktararak dinamik içerik oluşturmayı mümkün kılar.
Bu eğitimde, her Slot türünün nasıl kullanılacağını, Scoped Slots ile veri aktarımını ve bu teknikleri gerçek Vue.js projelerinde nasıl uygulayacağınızı öğreneceksiniz. Ayrıca, bellek sızıntıları, hatalı hata yönetimi ve performans sorunları gibi yaygın hatalardan kaçınma konuları da ele alınacaktır.
Temel Örnek <template>
text<div class="card">
<slot>
Varsayılan içerik: Ebeveyn bileşen içerik sağlamadı.
</slot>
</div>
</template>
<script>
export default {
name: "BaseCard"
};
</script>
<style scoped>
.card {
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
}
</style>
<!-- Kullanım -->
<BaseCard>
<p>Ebeveyn bileşen tarafından sağlanan içerik.</p>
</BaseCard>Yukarıdaki örnekte, BaseCard bileşeni bir
Pratik Örnek <template>
text<div class="modal">
<header class="modal-header">
<slot name="header">
<h2>Varsayılan Başlık</h2>
</slot>
</header>
<section class="modal-body">
<slot :user="userData">
<p>Varsayılan mesaj</p>
</slot>
</section>
<footer class="modal-footer">
<slot name="footer">
<button @click="closeModal">Kapat</button>
</slot>
</footer>
</div>
</template>
<script>
export default {
name: "UserModal",
data() {
return {
userData: { name: "Ahmet Yılmaz", role: "Admin" }
};
},
methods: {
closeModal() {
console.log("Modal kapatıldı");
}
}
};
</script>
<style scoped>
.modal { border: 1px solid #333; padding: 20px; border-radius: 10px; background: #f9f9f9; }
.modal-header, .modal-footer { padding: 10px; background: #eee; }
</style>
<!-- Kullanım -->
<UserModal>
<template #header>
<h1>Kullanıcı Detayları</h1>
</template>
<template #default="{ user }"> <p>Ad: {{ user.name }}</p> <p>Rol: {{ user.role }}</p> </template>
<template #footer>
<button @click="customClose">Özel Kapat</button> </template> </UserModal>Bu ileri seviye örnek, Named Slots (#header ve #footer) ve Scoped Slot (#default="{ user }") kullanımını göstermektedir. Named Slots, bileşen içinde belirli alanlara içerik yerleştirmeyi sağlarken, Scoped Slots çocuk bileşenden ebeveyne veri aktararak dinamik içerik üretir. v-slot ve # kısaltmaları, okunabilirliği ve kod bakımını artırır. v-if ve v-for ile kombinasyonu, DOM manipülasyonunu optimize eder ve performansı artırır.
Slots kullanırken en iyi uygulamalar ve yaygın hatalar:
- Anlamlı ve açıklayıcı Slot isimleri kullanın.
- Büyük dinamik içerik bloklarını optimize etmeden render etmeyin.
- Scoped Slots ile gelen verileri kullanmadan önce doğrulayın.
- v-if ve v-for kullanımını verimli yapın, gereksiz DOM manipülasyonunu önleyin.
- HTML enjeksiyonundan kaçının, XSS güvenliği sağlayın.
- Vue DevTools ile veri akışı ve Slotları izleyin.
- Slot içinde karmaşık iş mantığını bulundurmayın; tek sorumluluk ilkesini koruyun.
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| slot | Ebeveyn içeriğinin yerleştirileceği alan | <slot>Varsayılan içerik</slot> |
| Named Slot | Bileşen içinde birden fazla içerik alanı | <slot name="header">Başlık</slot> |
| Scoped Slot | Çocuk bileşenden veri aktarımı | <slot :user="userData"></slot> |
| #slot | Named Slot için kısaltma | <template #footer>Buton</template> |
| v-slot | Named ve Scoped Slot için modern sözdizimi | <template v-slot:default="{ user }">{{ user.name }}</template> |
Vue.js’de Slots kullanmayı öğrenmek, modüler ve özelleştirilebilir bileşenler oluşturmanızı sağlar. Default, Named ve Scoped Slots, veri aktarımı ve dinamik içerik renderı için güçlü araçlardır. Vuex/Pinia ile entegrasyon ve Composition API ile kullanıldığında, büyük ölçekli uygulamalarda performans, güvenlik ve bakım kolaylığı sağlar. Bir sonraki adım olarak Vue.js dokümantasyonunu takip etmek ve ileri seviye pratik örnekleri incelemek önerilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek