Slot Geri Dönüş İçeriği ve Slot'ları Denetleme
Varsayılan slot içeriği, slot sağlanıp sağlanmadığını denetlemek için useSlots(), koşullu oluşturma.
Slot Geri Dönüş İçeriği ve Slot'ları Denetleme, 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.
Yuva Yedek İçeriği
Bir <slot> varsayılan işaretleme içerebilir. Üst bileşen bu yuva için içerik sağlarsa üst bileşenin içeriği kullanılır; sağlamazsa yuvanın içindeki yedek içerik oluşturulur.
Yedek İçerik Tanımlama
Varsayılan içeriği yuva etiketlerinin arasına yerleştirin. Bu, isteğe bağlı yuvalar için zarif bir varsayılandır.
<!-- Button.vue -->
<button>
<slot>Submit</slot>
</button>Yedek İçerik İş Başında
Üst bileşen hiçbir şey göndermezse "Submit" görünür. Üst bileşen içerik gönderirse bu içerik yedeğin yerini alır.
<Button /> <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->Adlandırılmış Yuvalarda Yedek İçerik
Adlandırılmış yuvalar da yedek içeriği destekler. Üst bileşen başlık yuvasını sağlamadığında bu yuva standart bir başlık kullanabilir.
<header>
<slot name="header">
<h2>Default Title</h2>
</slot>
</header>Boş Sarmalayıcılar Sorunu
Bazen bir sarmalayıcı öğeyi (örneğin bir alt bilgi kapsayıcısını) yalnızca üst bileşen gerçekten yuva içeriği sağladığında oluşturmak istersiniz. Bunun için bir yuvanın mevcut olup olmadığını kontrol etmeniz gerekir.
useSlots Birleştirilebilir İşlevi
<script setup> içinde useSlots(), sağlanan yuva adlarının anahtarları olduğu bir nesne döndürür. Her değer, yuva sanal düğümlerini döndüren bir işlevdir.
import { useSlots } from "vue";
const slots = useSlots();Yuvanın Sağlanıp Sağlanmadığını Kontrol Etme
Yuva işlevini çağırın ve doğruluk değeri taşıyan içeriği kontrol edin. slots.header yalnızca üst bileşen bu yuvayı sağladıysa vardır; slots.header?.() çağrısı sanal düğümlerini güvenli bir şekilde döndürür.
const hasHeader = computed(() => !!slots.header);Sarmalayıcıyı Koşullu Oluşturma
Sarmalayıcı öğenin yalnızca içerik olduğunda görünmesi için kontrolü v-if ile kullanın. Böylece boş DOM düğümleri oluşturulmaz.
<header v-if="slots.header">
<slot name="header" />
</header>İsteğe Bağlı Zincirleme Neden Kullanılır
slots.header?.(), yuvanın tanımsız olmasına karşı koruma sağlar. İsteğe bağlı zincirleme olmadan tanımsız bir yuvayı çağırmak hata oluşturur. Bu kullanım, oluşturma işlevlerinde ve hesaplanmış kontrollerde yaygındır.
const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }Şablonda $slots
Şablonlar aynı verilere $slots aracılığıyla erişim sunar. useSlots içe aktarmadan bir v-if içinde $slots.footer değerini doğrudan kontrol edebilirsiniz.
<footer v-if="$slots.footer">
<slot name="footer" />
</footer>Hepsini Birleştirme
Sağlam bir kart bileşeni, her bölümü yalnızca ilgili yuvası sağlandığında oluşturur; böylece işaretleme temiz, stiller de öngörülebilir kalır.
<div class="card">
<header v-if="$slots.header"><slot name="header" /></header>
<div class="body"><slot /></div>
<footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>Kısa Kontrol
Üst bileşenin "header" yuvasını script setup içinde sağlayıp sağlamadığını nasıl kontrol edersiniz?
Özet
Yuvaların, üst bileşen yuvayı sağlamadığında oluşturulan yedek içerikleri barındırabileceğini öğrendiniz. Sarmalayıcıları koşullu oluşturmak için script setup içinde useSlots() (slots.header?.()) ile, şablonlarda ise $slots.header ile yuva varlığını kontrol edin.
Sıkça Sorulan Sorular
“Slot Geri Dönüş İçeriği ve Slot'ları Denetleme” dersi ücretsiz mi?
Evet — “Slot Geri Dönüş İçeriği ve Slot'ları Denetleme” 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.
“Slot Geri Dönüş İçeriği ve Slot'ları Denetleme” dersinde ne öğreneceğim?
Varsayılan slot içeriği, slot sağlanıp sağlanmadığını denetlemek için useSlots(), koşullu oluşturma. 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.
“Slot Geri Dönüş İçeriği ve Slot'ları Denetleme” 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