Genel Amaçlı Vue Bileşenleri
defineComponent ile genel türler, genel script setup ve türü belirlenmiş slot props'ları.
Genel Amaçlı Vue Bileşenleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.
Genel Türlü Bileşenler
Bazı bileşenler her veri türüyle çalışır: tür bilgili bir liste, seçim kutusu veya tablo gibi. Vue 3.3, genel türlü bileşenler yazmanıza olanak tanır; böylece tüketici any'ye geri dönmek yerine tam tür çıkarımını korur.
generic Özniteliği
<script setup> öğesine bir generic özniteliği ekleyin. Bu, tıpkı genel türlü bir işlev gibi betiğin tamamında kullanılabilen tür parametrelerini tanımlar.
<script setup lang="ts" generic="T">
// T can now be used below
</script>Genel Türlü Props
Tür parametresini defineProps içinde kullanın. Bu örnekte bileşen, herhangi bir türden T dizisini kabul eder.
<script setup lang="ts" generic="T">
defineProps<{
items: T[]
selected: T
}>()
</script>Çağrı Noktasında Tür Çıkarımı
Üst bileşen items gönderdiğinde TypeScript, T türünü verilerden çıkarır; açık bir türe gerek yoktur. Sayılar gönderirseniz selected bir sayı olmalıdır.
<MyList :items="[1, 2, 3]" :selected="2" />
<!-- T inferred as number -->Türü Sınırlama
Belirli bir şeklin zorunlu olması için extends ekleyin. Burada T bir id içermelidir; bu, anahtarlı listeler için kullanışlıdır.
<script setup lang="ts" generic="T extends { id: number }">
defineProps<{ items: T[] }>()
</script>Birden Çok Tür Parametresi
Tıpkı genel türlü bir işlev imzasında olduğu gibi, birkaç parametreyi virgüllerle ayırarak tanımlayın.
<script setup lang="ts" generic="T, K extends keyof T">
defineProps<{
items: T[]
field: K
}>()
</script>Tür Bilgili Slot Prop'ları
Slot içeriğinin de tür bilgisinden yararlanması için genel türleri tür bilgili slot'larla birleştirin. Slot imzasını defineSlots ile tanımlayın.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
defineSlots<{
default(props: { item: T }): any
}>()
</script>Genel Türlü Slot'u Görüntüleme
Şablonda her öğeyi slota aktarın. Üst bileşen, türleri doğru olan slot prop'larını alır.
<template>
<ul>
<li v-for="item in items" :key="String(item)">
<slot :item="item" />
</li>
</ul>
</template>Tür Çıkarımıyla Kullanma
Üst bileşen, aktardığı diziye göre slot kapsamındaki tür bilgili bir item değerini otomatik olarak alır.
<MyList :items="users">
<template #default="{ item }">
{{ item.name }}
</template>
</MyList>Genel Türlü Emit'ler
Tür parametreleri defineEmits içine de aktarılır; böylece bir olay yükü genel türü taşıyabilir.
<script setup lang="ts" generic="T">
defineProps<{ items: T[] }>()
const emit = defineEmits<{
select: [item: T]
}>()
</script>Genel Türler Ne Zaman Kullanılır
Bileşen gerçekten türden bağımsız olduğunda ve tür çıkarımının bileşen boyunca aktarılmasını istediğinizde genel türlü bileşenleri tercih edin; listeler, tablolar ve otomatik tamamlamalar buna örnektir. Veri şekilleri sabitse normal tür bilgili bir bileşen daha basittir.
Hızlı Sınama
Genel türlü bileşenler hakkındaki bilginizi sınayın.
Özet
Genel türlü bileşenleri öğrendiniz:
- script setup üzerindeki generic özniteliğiyle tür parametrelerini tanımlayın.
- items: T[] gibi türden bağımsız veriler için bunları defineProps içinde kullanın.
- extends ile sınırlandırın ve birden çok parametre ekleyin.
- Tüketicilerin tam tür çıkarımı elde etmesi için slot prop'larının türünü defineSlots ile belirleyin.
Sıkça Sorulan Sorular
“Genel Amaçlı Vue Bileşenleri” dersi ücretsiz mi?
Evet — “Genel Amaçlı Vue Bileşenleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.
“Genel Amaçlı Vue Bileşenleri” dersinde ne öğreneceğim?
defineComponent ile genel türler, genel script setup ve türü belirlenmiş slot props'ları. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vue Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Genel Amaçlı Vue Bileşenleri” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Vue Projelerinde TypeScript Kurulumu
- defineProps/defineEmits ile Türü Belirlenmiş Props ve Emit'ler
- Composable'ları ve Ref'leri Türlendirme
- Genel Amaçlı Vue Bileşenleri