Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma
slot :data='value', üst tarafta v-slot='{ data }', oluşturma özelliği kalıbı.
Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. 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.
Yalın Yuvaların Sınırlaması
Yalın yuvalar, üst bileşenin işaretlemeyi aşağıya aktarmasını sağlar; ancak üst bileşen alt bileşenin iç verilerine erişemez. Kapsamlı yuvalar, alt bileşenin verileri yuva içeriğine geri sunmasına izin vererek bu sorunu çözer.
Bir Yuvaya Veri Bağlama
Alt bileşen, yuva özellikleri olarak adlandırılan öznitelikleri kendi <slot> öğesine bağlar. Bunlar, üst bileşenin oluşturduğu içeriğe aktarılır.
<!-- List.vue -->
<ul>
<li v-for="(item, i) in items" :key="item.id">
<slot :item="item" :index="i"></slot>
</li>
</ul>Yuva Özelliklerini Alma
Üst bileşende v-slot değerine, alt bileşenin bağladığı tüm yuva özelliklerini içeren bir nesne atanır.
<List :items="users">
<template v-slot:default="slotProps">
{{ slotProps.index }}: {{ slotProps.item.name }}
</template>
</List>Yuva Özelliklerini Yapı Çözümlemeyle Alma
Yuva değeri yalnızca bir nesne olduğundan, daha temiz bir kod için yapısını satır içinde çözümleyebilirsiniz.
<List :items="users">
<template v-slot:default="{ item, index }">
{{ index }}: {{ item.name }}
</template>
</List>Varsayılan Kapsamlı Yuva için Kısaltma
Yalnızca varsayılan yuvayı kullandığınızda, v-slot yönergesini iç içe bir şablon yerine doğrudan bileşen etiketine ekleyebilirsiniz.
<List :items="users" v-slot="{ item }">
{{ item.name }}
</List>Yeniden Adlandırma ve Varsayılanlar
Yapı çözümleme, tıpkı normal JavaScript'te olduğu gibi yeniden adlandırmayı ve varsayılan değerleri destekler.
<template v-slot:default="{ item: user, index = 0 }">
{{ index }} - {{ user.name }}
</template>Adlandırılmış Kapsamlı Yuvalar
Adlandırılmış yuvalar da kapsamlı olabilir. Adı, yapı çözümlemesiyle alınan özelliklerle birleştirin.
<DataTable :rows="rows">
<template #cell="{ value, column }">
<strong>{{ column }}: {{ value }}</strong>
</template>
</DataTable>Görsel Çıktısız Bileşenler
Kapsamlı yuvalar görsel çıktısız bileşen desenini mümkün kılar: bir bileşen mantığı ve durumu yönetir, ancak kendine ait bir işaretleme oluşturmaz; verileri kapsamlı bir yuva aracılığıyla sunar ve kullanıcı arayüzüne üst bileşenin karar vermesini sağlar.
Görsel Çıktısız Fare İzleyici
Bileşen imleci izler ve koordinatları dışarı sunar. Yalnızca varsayılan yuvasını oluşturur ve x ile y değerlerini aktarır.
<!-- Mouse.vue setup -->
<slot :x="x" :y="y"></slot>Görsel Çıktısız Bileşeni Kullanma
Üst bileşen tüm görsel öğeleri sağlar ve dışarı sunulan verileri okur; böylece mantık sunumdan tamamen ayrılır.
<Mouse v-slot="{ x, y }">
<p>Cursor is at {{ x }}, {{ y }}</p>
</Mouse>Kapsamlı Yuvalar ve Birleştirilebilir Mantık
Vue 3'te yalnızca mantığı yeniden kullanmak için birleştirilebilir mantık yardımcıları çoğu zaman görsel çıktısız bileşenlerin yerini alır. Ancak alt bileşenin yineleme veya yapı üzerinde (liste ya da tablo gibi) denetim sahibi olması ve üst bileşenin her öğeyi özelleştirmesi gerektiğinde kapsamlı yuvalar hâlâ daha kullanışlıdır.
Kısa Kontrol
Üst bileşen, kapsamlı bir yuvanın sunduğu verileri nasıl alır?
Özet
Kapsamlı yuvaların, alt bileşenin <slot> üzerinde özellikler bağlayarak verileri üst bileşene sunmasını sağladığını öğrendiniz. Üst bileşen bunları v-slot değeri üzerinden (çoğu zaman yapı çözümleme kullanarak) okur; böylece mantığı sunumdan ayıran görsel çıktısız bileşenler oluşturulabilir.
Sıkça Sorulan Sorular
“Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma” dersi ücretsiz mi?
Evet — “Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma” 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.
“Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma” dersinde ne öğreneceğim?
slot :data='value', üst tarafta v-slot='{ data }', oluşturma özelliği kalıbı. 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 2. dersidir.
“Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma” 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
- Adlandırılmış Slot'lar ve Varsayılan Slot
- Kapsamlı Slot'lar: Üst Bileşene Veri Aktarma
- Dinamik Slot Adları
- Slot Geri Dönüş İçeriği ve Slot'ları Denetleme