Props
Vue.js'de Props, bir üst bileşenden alt bileşene veri iletmenin temel yöntemidir. Props, bileşenler arası veri akışını yöneterek uygulamanın modüler ve ölçeklenebilir olmasını sağlar. Tek yönlü veri akışı sağlayarak üst bileşenin durumu alt bileşenlerde güvenli bir şekilde kullanılabilir. Props yalnızca basit veri türlerini (String, Number, Boolean) değil, aynı zamanda nesneler, diziler ve fonksiyonlar gibi karmaşık veri yapılarını da içerebilir. Bu esneklik, uygulamanın farklı gereksinimlerine uygun, yeniden kullanılabilir ve bakımı kolay bileşenler geliştirmeyi mümkün kılar.
Vue.js uygulamalarında Props kullanımı, tip doğrulama, varsayılan değerler ve hata yönetimi ile birlikte ele alınmalıdır. Doğru Props kullanımı, bileşenlerin yeniden kullanılabilirliğini artırırken aynı zamanda uygulamanın genel mimarisi ve sistem tasarımı açısından önemli bir rol oynar. Bu eğitimde, Props'un temel kullanımından ileri düzey uygulamalara, hesaplanmış özellikler (computed properties), watchers ve $emit ile veri güncellemeleri gibi ileri konseptlere kadar geniş bir perspektif sunulacaktır. Öğrenciler, Props kullanarak reaktif, güvenli ve sürdürülebilir Vue.js bileşenleri oluşturmayı öğreneceklerdir.
Temel Örnek <template>
text<div>
<h1>Üst Bileşen</h1>
<ChildComponent :baslik="baslikUst" :sayac="sayacUst" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
name: 'ParentComponent',
components: { ChildComponent },
data() {
return {
baslikUst: 'Vue.js Props Örneği',
sayacUst: 5
}
}
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<h2>{{ baslik }}</h2>
<p>Sayac: {{ sayac }}</p>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: {
baslik: {
type: String,
required: true
},
sayac: {
type: Number,
default: 0
}
}
}
</script>Bu örnekte, üst bileşen ChildComponent'e baslik ve sayac Props'larını iletmektedir. İki nokta işareti (:) ile veri bağlama sağlanarak reaktif veri akışı oluşturulur. Alt bileşende, Props türleri ve varsayılan değerleri belirtilmiştir; bu, doğrulama ve çalışma zamanı hatalarını önler. Vue.js'de Props kullanımıyla verilerin tek yönlü akışı korunur, bileşenler arasındaki bağımlılıklar minimuma indirilir ve kodun sürdürülebilirliği artırılır. Gerçek dünya uygulamalarında Props, hesaplanmış özellikler ve yöntemlerle birleştirilerek daha karmaşık veri manipülasyonları ve kullanıcı etkileşimleri sağlanabilir.
Pratik Örnek <template>
text<div>
<h1>Gelişmiş Alt Bileşen</h1>
<p>Ürün: {{ urun.ad }}</p>
<p>Miktar: {{ miktar }}</p>
<p>Toplam Fiyat: {{ toplamFiyat }}</p>
<button @click="miktarArtir">Birim Ekle</button>
</div>
</template>
<script>
export default {
name: 'AdvancedChild',
props: {
urun: {
type: Object,
required: true,
validator: obj => 'ad' in obj && 'fiyat' in obj
},
miktar: {
type: Number,
default: 1
}
},
computed: {
toplamFiyat() {
return this.urun.fiyat * this.miktar
}
},
methods: {
miktarArtir() {
this.$emit('update:miktar', this.miktar + 1)
}
}
}
</script>
<!-- Üst Bileşende Kullanım -->
<AdvancedChild :urun="{ ad: 'Laptop', fiyat: 1200 }" :miktar="2" @update:miktar="newQty => miktar = newQty" />Bu gelişmiş örnek, nesne tipindeki Props ile doğrulama yaparak beklenen alanların varlığını kontrol eder. Hesaplanmış özellik toplamFiyat, miktara bağlı olarak dinamik hesaplama sağlar. Alt bileşende miktarArtir metodu, üst bileşene $emit ile veri güncelleme etkinliği gönderir ve tek yönlü veri akışını korur. Gerçek dünya senaryolarında bu desen e-ticaret sepeti, kullanıcı panelleri veya stok yönetimi gibi uygulamalarda kullanılabilir. Props ile birlikte doğru tip doğrulama, hesaplanmış özellikler ve olay emit kullanımı, Vue.js'de performans ve güvenilirlik için kritik öneme sahiptir.
Props kullanırken en iyi uygulamalar ve yaygın hatalar: Props tiplerini ve varsayılan değerleri tanımlamak, alt bileşende Props'u doğrudan değiştirmemek ve değişiklikleri $emit ile yönetmek. Watcher ve event listener’ları uygun lifecycle hook’larda temizleyerek bellek sızıntılarını önlemek. Nesne ve dizi tipindeki Props için doğrulama yapmak hataları önler. Performans optimizasyonu için gereksiz rerenderları minimize edin ve Vue DevTools ile Props takibini sağlayın. Bu uygulamalar, Vue.js bileşenlerinin güvenli, etkili ve sürdürülebilir olmasını sağlar.
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| props | Alt bileşenler için özelleştirilmiş özellikler tanımlar | props: { baslik: String, sayac: Number } |
| :prop | Üst bileşenden alt bileşene veri bağlama | <ChildComponent :baslik="baslikUst" /> |
| Props Doğrulama | Veri tipini kontrol eder | props: { sayac: { type: Number, required: true } } |
| Varsayılan Değerler | Prop gelmediğinde varsayılan kullanır | props: { miktar: { type: Number, default: 1 } } |
| Computed ile Props | Props üzerinden reaktif hesaplama yapar | computed: { toplam: () => this.fiyat * this.miktar } |
| Özel Doğrulayıcı | Nesne yapısını kontrol eder | props: { urun: { validator: obj => 'ad' in obj } } |
Özet ve sonraki adımlar: Props, Vue.js’de modüler ve yeniden kullanılabilir bileşenler oluşturmayı sağlar. Props’un doğru yapılandırılması, tip doğrulama, reaktivite ve hesaplanmış özelliklerle kullanımı veri akışının öngörülebilir olmasını sağlar. Sonraki adımlar olarak dinamik Props, slot kullanımı ve provide/inject desenleri önerilir. Gerçek projelerde pratik yapmak, bilgiyi pekiştirir ve karmaşık uygulamaların geliştirilmesinde yetkinlik kazandırır.
🧠 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