Vue Academy · Ders

render İşlevleriyle Dinamik Bileşenler

Bileşenleri türe göre değiştirme, bileşen çözümleme ve render işlevlerinde slot'ları koruma.

render İşlevleriyle Dinamik Bileşenler, 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.

Oluşturma İşlevlerinde Dinamik Bileşenler

Şablonlar, bileşenleri çalışma zamanında değiştirmek için <component :is="..."> kullanır. Oluşturma işlevinde aynı sonucu çözümleme yardımcıları ve h ile elde edersiniz.

resolveComponent

resolveComponent, genel veya yerel olarak kayıtlı bir bileşeni kayıtlı adına göre arar ve h ile kullanılmak üzere döndürür.

import { h, resolveComponent } from "vue";

export default {
  render() {
    const Btn = resolveComponent("MyButton");
    return h(Btn, null, () => "Click");
  }
};

resolveDynamicComponent

Hedef bir kayıtlı ad, bir HTML etiketi veya bir bileşen nesnesi olabilirse resolveDynamicComponent kullanın. Bu yardımcı, üç durumun tamamını ele alır.

import { h, resolveDynamicComponent } from "vue";

h(resolveDynamicComponent(props.type));

Türü Özelliklerden Belirleme

Bileşen adını bir özellik üzerinden geçirin ve her oluşturmada çözümleyin. Bu, :is ifadesinin oluşturma işlevindeki karşılığıdır.

export default {
  props: { type: String },
  render() {
    const Comp = resolveDynamicComponent(this.type);
    return h(Comp, { msg: "hi" });
  }
};

Özellikleri İletme

Dinamik alt öğenin üst öğeye verilen her şeyi alması için gelen öznitelikleri çözümlenen bileşene yayarak aktarın.

setup(props, { attrs }) {
  return () => h(
    resolveDynamicComponent(props.type),
    { ...attrs }
  );
}

Yuvaları İletme

Yuvalar, h işlevinin üçüncü bağımsız değişkeni aracılığıyla alt öğeye ulaşır. Dinamik bileşenin bunları oluşturabilmesi için üst öğenin yuva nesnesini doğrudan iletin.

setup(props, { slots }) {
  return () => h(
    resolveDynamicComponent(props.type),
    null,
    slots
  );
}

Yeniden Kullanılabilir Oluşturucu

Öznitelik ve yuva iletimini birleştirmek, her bileşeni adına göre oluşturan ve her şeyi olduğu gibi aktaran ince bir sarmalayıcı üretir.

setup(props, { attrs, slots }) {
  return () => h(
    resolveDynamicComponent(props.is),
    attrs,
    slots
  );
}

Dinamik Sütun Oluşturucuları

Veri tabloları, çoğu zaman her sütunun kendi oluşturucu bileşenini belirtmesine izin verir. Bileşen adını her sütunda saklayın ve her hücre için çözümleyin.

const columns = [
  { field: "name", renderer: "TextCell" },
  { field: "price", renderer: "MoneyCell" }
];

Hücreleri Dinamik Olarak Oluşturma

Her sütun için oluşturucusunu çözümleyin ve hücre değerini bir özellik olarak geçirin. Tek bir döngü, farklı hücre türlerini oluşturur.

render() {
  return h("tr", null,
    columns.map((col) =>
      h("td", null, [
        h(resolveDynamicComponent(col.renderer), {
          value: this.row[col.field]
        })
      ])
    )
  );
}

Bir Etikete Geri Dönme

resolveDynamicComponent kayıtlı olmayan bir ad alırsa bunu yerel bir öğe dizesi olarak ele alır; böylece "div" gerçek bir div'i güvenle oluşturur.

h(resolveDynamicComponent("div"), { class: "box" }, "fallback");

Burada Oluşturma İşlevleri Neden Kullanılır

Oluşturma işlevleri, yapı hesaplandığında öne çıkar: değişken sayıda alt öğe, öğe başına farklı bileşen türleri veya çok sayıda iç içe şablon koşulu gerektirecek mantık.

Hızlı Kontrol

Bileşen adı OR yerel HTML etiketi olabilecek bir hedefi güvenle hangi yardımcı çözümler?

Özet

Kayıtlı adlar için resolveComponent, hedef bir HTML etiketi veya bileşen nesnesi de olabilecekse resolveDynamicComponent kullanın. attrs değerini özellik olarak iletin ve slots nesnesini üçüncü h bağımsız değişkeni olarak geçirin. Bu düzen, dinamik tablo sütunu oluşturucularını ve esnek sarmalayıcıları destekler.

Sıkça Sorulan Sorular

“render İşlevleriyle Dinamik Bileşenler” dersi ücretsiz mi?

Evet — “render İşlevleriyle Dinamik Bileşenler” 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.

“render İşlevleriyle Dinamik Bileşenler” dersinde ne öğreneceğim?

Bileşenleri türe göre değiştirme, bileşen çözümleme ve render işlevlerinde slot'ları koruma. 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.

“render İşlevleriyle Dinamik Bileşenler” 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