Vue Academy · Pelajaran

Komponen Dinamik dengan Fungsi render

Menukar komponen mengikut jenis, penyelesaian komponen, mengekalkan slot dalam fungsi render.

Pelajaran 3 daripada 413 langkah

Komponen Dinamik dengan Fungsi render ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Komponen Dinamik dalam Fungsi Pemaparan

Templat menggunakan <component :is="..."> untuk menukar komponen semasa masa jalan. Dalam fungsi pemaparan, Anda mencapai perkara yang sama dengan pembantu resolusi dan h.

resolveComponent

resolveComponent mencari komponen yang didaftarkan secara global atau setempat berdasarkan nama pendaftarannya, lalu mengembalikannya untuk digunakan bersama h.

import { h, resolveComponent } from "vue";

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

resolveDynamicComponent

Apabila sasaran mungkin berupa nama yang didaftarkan, teg HTML atau objek komponen, gunakan resolveDynamicComponent. Ia mengendalikan ketiga-tiga keadaan tersebut.

import { h, resolveDynamicComponent } from "vue";

h(resolveDynamicComponent(props.type));

Mengawal Jenis melalui Prop

Hantar nama komponen melalui prop dan dapatkannya pada setiap pemaparan. Ini ialah padanan fungsi pemaparan bagi :is.

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

Meneruskan Prop

Kembangkan attrs yang diterima ke atas komponen yang telah diselesaikan supaya anak dinamik menerima segala-galanya yang diberikan oleh induk.

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

Meneruskan Slot

Slot sampai kepada anak melalui argumen ketiga h. Teruskan objek slot induk secara langsung supaya komponen dinamik memaparkannya.

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

Pemapar Boleh Guna Semula

Penggabungan penerusan attrs dan slot menghasilkan pembalut nipis yang memaparkan sebarang komponen berdasarkan nama sambil meneruskan segala-galanya.

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

Pemapar Lajur Dinamik

Jadual data sering membenarkan setiap lajur menentukan komponen pemaparnya sendiri. Simpan nama komponen bagi setiap lajur dan dapatkannya untuk setiap sel.

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

Memaparkan Sel Secara Dinamik

Bagi setiap lajur, dapatkan pemaparnya dan hantar nilai sel sebagai prop. Satu gelung mengendalikan jenis sel yang berbeza-beza.

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

Beralih kepada Teg

Jika resolveDynamicComponent menerima nama yang tidak didaftarkan, ia menganggapnya sebagai rentetan elemen natif, jadi "div" memaparkan div sebenar dengan selamat.

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

Mengapa Menggunakan Fungsi Pemaparan di Sini

Fungsi pemaparan sangat berguna apabila struktur dikira — bilangan anak yang berubah-ubah, jenis komponen bagi setiap item atau logik yang memerlukan banyak syarat templat bersarang.

Semakan Pantas

Pembantu manakah yang menyelesaikan sasaran dengan selamat apabila sasaran itu mungkin nama komponen OR teg HTML natif?

Jawab dalam pelajaran interaktif

Imbas Kembali

Gunakan resolveComponent untuk nama yang didaftarkan dan resolveDynamicComponent apabila sasaran juga mungkin berupa teg HTML atau objek komponen. Teruskan attrs sebagai prop dan hantar objek slots sebagai argumen ketiga h. Corak ini menggerakkan pemapar lajur jadual dinamik dan pembalut yang fleksibel.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Komponen Dinamik dengan Fungsi render” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Komponen Dinamik dengan Fungsi render”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Komponen Dinamik dengan Fungsi render”?

Menukar komponen mengikut jenis, penyelesaian komponen, mengekalkan slot dalam fungsi render. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Komponen Dinamik dengan Fungsi render” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy