Adlandırılmış Slot'lar ve Varsayılan Slot
Birden çok , , kısa #name söz dizimi.
Adlandırılmış Slot'lar ve Varsayılan Slot, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.
Yuvalar Nedir
Yuvalar, bir üst bileşenin işaretlemeyi alt bileşene aktarmasını sağlar. Alt bileşen, bu içeriğin nerede görüneceğine <slot> öğesini kullanarak karar verir. Bu, Vue'daki içerik dağıtımıdır.
Varsayılan Yuva
Adı olmayan bir <slot>, varsayılan yuvadır. Üst bileşenin bileşen etiketleri arasına yerleştirdiği her şey burada görünür.
<!-- Card.vue -->
<div class="card">
<slot></slot>
</div>Varsayılan Yuvayı Kullanma
Üst bileşen içeriği doğrudan bileşen etiketlerinin içine yerleştirir.
<Card>
<p>This goes into the default slot</p>
</Card>Adlandırılmış Yuvalar Neden Kullanılır
Birçok bileşende birden fazla ekleme noktası bulunur: üst bilgi, gövde ve alt bilgi gibi. Adlandırılmış yuvalar, her bölgeye bir tanımlayıcı vererek üst bileşenin bunları ayrı ayrı hedeflemesini sağlar.
Adlandırılmış Yuvaları Tanımlama
Her yuvaya bir name özniteliği ekleyin. Bir bileşen, adlandırılmış yuvaları tek bir varsayılan (adsız) yuvayla birlikte kullanabilir.
<!-- Card.vue -->
<div class="card">
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</div>Adlandırılmış Yuvaları v-slot ile Doldurma
Üst bileşende, adlandırılmış bir yuvayı hedeflemek için içeriği v-slot:name yönergesine sahip bir <template> içine sarın.
<Card>
<template v-slot:header>
<h2>Title</h2>
</template>
<template v-slot:footer>
<button>OK</button>
</template>
</Card># Kısaltması
v-slot: için bir kısaltma bulunur: #. Böylece v-slot:header, #header hâline gelir. Bu, deyimsel ve kısa biçimdir.
<Card>
<template #header>
<h2>Title</h2>
</template>
</Card>Etiketler Arasındaki Varsayılan İçerik
Doğrudan bileşen etiketleri arasına yerleştirilen içerik (adlandırılmış bir şablonun içine değil) varsayılan yuvaya gider. Bunu #default ile açıkça da hedefleyebilirsiniz.
<Card>
<p>Implicit default slot content</p>
<template #footer>Footer</template>
</Card>Örtük ve Açık Kullanımı Birleştirme
Varsayılan içeriği doğrudan, adlandırılmış yuvaları ise şablonlar aracılığıyla aynı kullanım içinde yazabilirsiniz. Vue, her parçayı adına göre doğru yere yönlendirir.
<Card>
<template #header><h2>Header</h2></template>
Body text right here
<template #footer>Footer</template>
</Card>Oluşturma Sırası
Üst bileşendeki yuvaların sırası önemli değildir; son yerleşimi alt bileşenin şablonu belirler. Yuva içeriği her zaman alt bileşenin eşleşen <slot> öğesini yerleştirdiği yerde görünür.
Pratik Bir Yerleşim Bileşeni
Adlandırılmış yuvalar yeniden kullanılabilir yerleşim iskeletleri oluşturmayı sağlar. Tek bir <BaseLayout>, üst bilgi, kenar çubuğu ve ana içerik yuvalarını kabul ederek herhangi bir sayfayı barındırabilir.
<!-- BaseLayout.vue -->
<header><slot name="header" /></header>
<aside><slot name="sidebar" /></aside>
<main><slot /></main>Kısa Kontrol
v-slot:header için kullanılan kısaltma nedir?
Özet
Yuvaların, üst bileşenin işaretlemesini alt bileşene dağıtmasını sağladığını öğrendiniz. Adsız bir <slot> varsayılan yuvadır; name eklemek adlandırılmış yuvalar oluşturur. Üst bileşenler bunları <template v-slot:name> veya #name kısaltmasıyla doldurur ve son yerleşime alt bileşenin şablonu karar verir.
Sıkça Sorulan Sorular
“Adlandırılmış Slot'lar ve Varsayılan Slot” dersi ücretsiz mi?
Evet — “Adlandırılmış Slot'lar ve Varsayılan Slot” 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.
“Adlandırılmış Slot'lar ve Varsayılan Slot” dersinde ne öğreneceğim?
Birden çok , , kısa #name söz dizimi. 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 1. dersidir.
“Adlandırılmış Slot'lar ve Varsayılan Slot” 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