Vue Academy · Pelajaran

Komponen Dinamis dengan Fungsi render

Mengganti komponen berdasarkan tipe, resolusi komponen, serta mempertahankan slot dalam fungsi render.

Komponen Dinamis dengan Fungsi render adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Komponen Dinamis dalam Fungsi Render

Templat menggunakan <component :is="..."> untuk mengganti komponen saat runtime. Dalam fungsi render, Anda dapat melakukan hal yang sama dengan fungsi pembantu resolusi dan h.

resolveComponent

resolveComponent mencari komponen yang terdaftar secara global atau lokal berdasarkan nama terdaftarnya, lalu mengembalikannya untuk digunakan bersama h.

import { h, resolveComponent } from "vue";

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

resolveDynamicComponent

Jika targetnya mungkin berupa nama terdaftar, tag HTML, atau objek komponen, gunakan resolveDynamicComponent. Fungsi ini menangani ketiga kasus tersebut.

import { h, resolveDynamicComponent } from "vue";

h(resolveDynamicComponent(props.type));

Menentukan Tipe dari Properti

Teruskan nama komponen melalui sebuah properti dan lakukan resolusi pada setiap perenderan. Ini adalah padanan fungsi render untuk :is.

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

Meneruskan Properti

Sebarkan atribut yang masuk ke komponen hasil resolusi agar anak dinamis menerima semua yang diberikan oleh induknya.

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

Meneruskan Slot

Slot diteruskan ke anak melalui argumen ketiga h. Teruskan objek slot milik induk secara langsung agar komponen dinamis merendernya.

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

Perender yang Dapat Digunakan Kembali

Penggabungan penerusan atribut dan slot menghasilkan pembungkus tipis yang dapat merender komponen apa pun berdasarkan namanya sambil meneruskan semuanya.

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

Perender Kolom Dinamis

Tabel data sering memungkinkan setiap kolom menentukan komponen perendernya sendiri. Simpan nama komponen untuk setiap kolom, lalu lakukan resolusi untuk setiap sel.

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

Merender Sel secara Dinamis

Untuk setiap kolom, lakukan resolusi terhadap perendernya dan teruskan nilai sel sebagai properti. Satu perulangan menangani tipe sel yang beragam.

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

Beralih ke Tag Cadangan

Jika resolveDynamicComponent menerima nama yang tidak terdaftar, fungsi tersebut memperlakukannya sebagai string elemen bawaan, sehingga "div" merender div asli dengan aman.

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

Alasan Menggunakan Fungsi Render di Sini

Fungsi render sangat berguna ketika strukturnya dihitung secara dinamis—jumlah anak yang berubah-ubah, tipe komponen per item, atau logika yang memerlukan banyak kondisi templat bersarang.

Pemeriksaan Singkat

Fungsi pembantu mana yang dengan aman melakukan resolusi terhadap target yang mungkin berupa nama komponen OR tag HTML bawaan?

Ringkasan

Gunakan resolveComponent untuk nama yang terdaftar dan resolveDynamicComponent jika targetnya juga dapat berupa tag HTML atau objek komponen. Teruskan attrs sebagai properti dan berikan objek slots sebagai argumen ketiga h. Pola ini menjadi dasar perender kolom tabel dinamis dan pembungkus yang fleksibel.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Komponen Dinamis dengan Fungsi render” gratis?

Ya — teks lengkap “Komponen Dinamis dengan Fungsi render” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Komponen Dinamis dengan Fungsi render”?

Mengganti komponen berdasarkan tipe, resolusi komponen, serta mempertahankan slot dalam fungsi render. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Komponen Dinamis dengan Fungsi render” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy