Vue Academy · Ders

Dinamik Slot Adları

v-slot:[dynamicName], programatik slot seçimi, koşullu slot oluşturma.

Dinamik Slot Adları, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 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 4 dersten oluşur.

Dinamik Yuva Adları Neden Kullanılır

Bazen doldurmak istediğiniz yuva çalışma zamanına kadar bilinmez; bu ad bir özelliğe, duruma veya döngü değişkenine bağlı olabilir. Vue, köşeli parantez söz dizimiyle bir yuva adını hesaplamanıza izin verir.

Dinamik Bağımsız Değişken Söz Dizimi

v-slot: sonrasında bir ifadeyi köşeli parantez içine alın. Vue, hedef yuva adını belirlemek için bu ifadeyi değerlendirir.

<MyComponent>
  <template v-slot:[dynamicName]>
    Goes into whatever slot dynamicName equals
  </template>
</MyComponent>

Köşeli Parantezlerle Kısaltma

# kısaltması da dinamik bağımsız değişkenleri destekler.

<MyComponent>
  <template #[dynamicName]>
    Dynamic slot content
  </template>
</MyComponent>

Adı Durumdan Belirleme

Köşeli parantez içindeki ifade, reaktif herhangi bir değeri okuyabilir. Değişkeni değiştirmek, içeriğin hangi yuvayı doldurduğunu değiştirir.

const dynamicName = ref("header");
// later: dynamicName.value = "footer";

Oluşturulan İçeriği Değiştirme

Birden çok adlandırılmış yuva tanımlayan bir alt bileşenle birlikte kullanıldığında dinamik adlar, tek bir şablonun duruma göre farklı bölgeleri etkinleştirmesini sağlar.

<!-- child has slots: header, body, footer -->
<Panel>
  <template #[activeSection]>
    Active content here
  </template>
</Panel>

Adları Özelliklerden Seçme

Bileşen özelliği hangi yuvanın kullanılacağına karar verebilir. Bu, çağıranın bölgeyi seçtiği yapılandırılabilir kapsayıcılar için kullanışlıdır.

const props = defineProps({ target: String });
// use props.target inside #[props.target]

Dinamik Yuvalar Üzerinde Yineleme

Döngüdeki öğeden her adı hesaplayarak yuvaları bir döngü içinde oluşturabilirsiniz; bu, tablo sütunları veya sekme sistemleri için kullanışlıdır.

<template
  v-for="col in columns"
  v-slot:[col.name]="{ row }"
>
  {{ row[col.field] }}
</template>

Küçük Harfli ve Geçerli Adlar

Dinamik yuva adları geçerli dizelere dönüştürülmelidir. Null, varsayılan yuva olarak değerlendirilir. Satır içi şablonlar kullanırken boşluklardan ve HTML öznitelik adlarında geçersiz olan karakterlerden kaçının.

const name = condition ? "primary" : null;
// null -> default slot

Koşullu Yuva Seçimi

Köşeli parantezlerin içindeki üçlü koşul, şablon içinde tek bir koşula göre yuvalar arasından seçim yapar.

<Alert>
  <template #[isError ? 'error' : 'info']>
    {{ message }}
  </template>
</Alert>

Sekme Bileşeni Kullanım Örneği

Bir Sekmeler bileşeni, seçili sekmenin kimliğinden yuva adını hesaplayarak etkin sekmenin içeriğini oluşturabilir ve üst bileşenin bildirimsel yapısını koruyabilir.

<Tabs>
  <template #[currentTab]>
    {{ tabContent }}
  </template>
</Tabs>

Okunabilirliği Koruyun

Dinamik yuvalar güçlüdür, ancak amacı belirsizleştirebilir. Bunları, yuva kümesi gerçekten veriye dayalı olduğunda tercih edin; sabit sayıda yuva için yalın adlandırılmış yuvaların okunması daha kolaydır.

Kısa Kontrol

Adı çalışma zamanında hesaplanan bir yuvayı hangi söz dizimi seçer?

Özet

Dinamik yuva adlarının, hangi yuvanın doldurulacağını props veya durumdan hesaplamak için köşeli parantez söz dizimi olan v-slot:[expr] ya da #[expr] kullandığını öğrendiniz. Bu sayede yapılandırılabilir sarmalayıcılar, sekme sistemleri ve veriye dayalı sütun oluşturma özellikleri etkinleştirilir.

Sıkça Sorulan Sorular

“Dinamik Slot Adları” dersi ücretsiz mi?

Evet — “Dinamik Slot Adları” 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.

“Dinamik Slot Adları” dersinde ne öğreneceğim?

v-slot:[dynamicName], programatik slot seçimi, koşullu slot 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 3. dersidir.

“Dinamik Slot Adları” 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 Academy Sayfasına Dön