Slot'lar ve Kapsamlı Slot'lar
Slot'ları ve kapsamlı slot'ları kullanarak esnek bileşenler oluşturun.
Slot'lar ve Kapsamlı Slot'lar, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 3. 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 3 dersten oluşur.
Yerleştirme Alanları Nedir?
Yerleştirme alanları, üst component'in içeriği alt component'in şablonuna eklemesini sağlar.
- Props veri, yerleştirme alanları işaretleme aktarır
- Düzen sarmalayıcıları, kartlar ve modallar için idealdir
- İçeriğin nereye gideceğine alt component karar verir
Varsayılan Yerleştirme Alanı
Alt component, yerleştirme alanı öğesiyle bir yer tutucu tanımlar. Üst component etiketlerin arasına ne koyarsa bu alanı doldurur.
<!-- Card.vue (child) -->
<template>
<div class="card">
<slot></slot>
</div>
</template>Varsayılan Yerleştirme Alanını Kullanma
Üst component, içeriği component etiketlerinin arasına aktarır.
<!-- Parent -->
<Card>
<h2>Title</h2>
<p>Any content goes here.</p>
</Card>
<!-- It renders inside the card div -->Yedek Yerleştirme Alanı İçeriği
Bir yerleştirme alanı, üst component hiçbir şey aktarmadığında gösterilecek yedek içerik sağlayabilir.
<!-- Button.vue -->
<template>
<button>
<slot>Click me</slot>
</button>
</template>
<!-- <Button /> shows "Click me";
<Button>Save</Button> shows "Save" -->Birden Çok Adlandırılmış Yerleştirme Alanı
Adlandırılmış yerleştirme alanları, bir component'in birden çok ekleme noktası sunmasını sağlar.
<!-- Layout.vue -->
<template>
<header><slot name="header"></slot></header>
<main><slot></slot></main>
<footer><slot name="footer"></slot></footer>
</template>Adlandırılmış Yerleştirme Alanlarını Doldurma
Üst component, bir şablon etiketindeki v-slot:name ile adlandırılmış bir yerleştirme alanını hedefler.
<Layout>
<template v-slot:header>
<h1>Site Title</h1>
</template>
<p>Main content (default slot)</p>
<template v-slot:footer>
<small>Copyright 2024</small>
</template>
</Layout>v-slot Kısa Yazımı
v-slot için kısa yazım olarak # sembolü kullanılabilir.
<Layout>
<template #header>
<h1>Title</h1>
</template>
<template #footer>
<small>Footer</small>
</template>
</Layout>Kapsamlı Yerleştirme Alanları
Kapsamlı yerleştirme alanları, alt component'in verileri alan içeriğine aktarmasını sağlar.
- Alt component verileri yerleştirme alanı öğesine bağlar
- Üst component bunları slotProps olarak alır
- Verileri alt component'in, görünümü ise üst component'in yönettiği durumlarda kullanışlıdır
Alt Component'ten Veri Sunma
Alt component, verileri paylaşmak için öznitelikleri yerleştirme alanına bağlar.
<!-- UserList.vue -->
<template>
<li v-for="user in users" :key="user.id">
<slot :user="user"></slot>
</li>
</template>Kapsamlı Yerleştirme Alanı Verilerini Kullanma
Üst component, verileri v-slot aracılığıyla alır.
<UserList>
<template #default="slotProps">
{{ slotProps.user.name }}
</template>
</UserList>
<!-- or destructure: #default="{ user }" -->Her Yerleştirme Alanı Ne Zaman Kullanılır?
Kısa kılavuz:
- Varsayılan yerleştirme alanı, basit içerik eklemeleri için
- Adlandırılmış yerleştirme alanları, birden çok bölge (düzen) için
- Kapsamlı yerleştirme alanları, üst component'in alt component'in iç verilerine ihtiyaç duyduğu durumlarda
Hızlı Kontrol
Yerleştirme alanları hakkındaki anlayışınızı sınayın.
Özet: Yerleştirme Alanları
Yerleştirme alanlarıyla içerik dağıtmayı öğrendiniz:
- Varsayılan yerleştirme alanı, üst component'ten gelen işaretlemeyi ekler
- Hiçbir şey aktarılmadığında yedek içerik gösterilir
- Adlandırılmış yerleştirme alanları (v-slot:name, # kısa yazımı) bölgeleri hedefler
- Kapsamlı yerleştirme alanları, alt component verilerini alan içeriğine aktarır
Sırada: tepkisellik temelleri.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 42
- Dersler
- 156
Sıkça Sorulan Sorular
“Slot'lar ve Kapsamlı Slot'lar” dersi ücretsiz mi?
Evet — “Slot'lar ve Kapsamlı Slot'lar” 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 3 dersten oluşur.
“Slot'lar ve Kapsamlı Slot'lar” dersinde ne öğreneceğim?
Slot'ları ve kapsamlı slot'ları kullanarak esnek bileşenler oluşturun. 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, 3 dersinin 3. dersidir.
“Slot'lar ve Kapsamlı Slot'lar” 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
- Bileşen Oluşturma ve Kaydetme
- Props ve Özel Olaylar
- Slot'lar ve Kapsamlı Slot'lar