0Pricing
Vue Academy · บทเรียน

คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render

การสลับคอมโพเนนต์ตามชนิด การแก้ไขคอมโพเนนต์ และการคงสล็อตไว้ในฟังก์ชัน render

คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คอมโพเนนต์แบบไดนามิกในฟังก์ชันเรนเดอร์

เทมเพลตใช้ <component :is="..."> เพื่อสลับคอมโพเนนต์ขณะรันไทม์ ในฟังก์ชันเรนเดอร์ คุณทำแบบเดียวกันได้ด้วยตัวช่วย resolve และ h

resolveComponent

resolveComponent ค้นหาคอมโพเนนต์ที่ลงทะเบียนไว้ในระดับส่วนกลางหรือภายในเครื่องด้วยชื่อที่ลงทะเบียน และคืนค่าคอมโพเนนต์นั้นเพื่อใช้กับ h

import { h, resolveComponent } from "vue";

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

resolveDynamicComponent

เมื่อเป้าหมายอาจเป็นชื่อที่ลงทะเบียน แท็ก HTML หรือออบเจ็กต์คอมโพเนนต์ ให้ใช้ resolveDynamicComponent ตัวช่วยนี้จัดการได้ทั้งสามกรณี

import { h, resolveDynamicComponent } from "vue";

h(resolveDynamicComponent(props.type));

กำหนดประเภทจากพร็อพส์

ส่งชื่อคอมโพเนนต์ผ่านพร็อพส์ แล้วแก้ไขการอ้างอิงคอมโพเนนต์นั้นทุกครั้งที่เรนเดอร์ วิธีนี้เทียบเท่ากับ :is ในฟังก์ชันเรนเดอร์

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

การส่งต่อพร็อพส์

กระจายแอตทริบิวต์ที่รับเข้ามาลงในคอมโพเนนต์ที่แก้ไขการอ้างอิงแล้ว เพื่อให้คอมโพเนนต์ลูกแบบไดนามิกได้รับทุกอย่างที่คอมโพเนนต์แม่ได้รับมา

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

การส่งต่อสล็อต

สล็อตจะส่งไปยังคอมโพเนนต์ลูกผ่านอาร์กิวเมนต์ตัวที่สามของ h ให้ส่งออบเจ็กต์สล็อตของคอมโพเนนต์แม่ต่อไปโดยตรง เพื่อให้คอมโพเนนต์แบบไดนามิกเรนเดอร์สล็อตเหล่านั้น

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

ตัวเรนเดอร์ที่นำกลับมาใช้ได้

การรวมการส่งต่อแอตทริบิวต์และสล็อตเข้าด้วยกันจะได้ตัวห่อหุ้มขนาดเล็กที่เรนเดอร์คอมโพเนนต์ใดก็ได้ตามชื่อ พร้อมส่งต่อทุกอย่างไป

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

ตัวเรนเดอร์คอลัมน์แบบไดนามิก

ตารางข้อมูลมักอนุญาตให้แต่ละคอลัมน์ระบุคอมโพเนนต์ตัวเรนเดอร์ของตนเอง ให้เก็บชื่อคอมโพเนนต์ไว้กับแต่ละคอลัมน์ แล้วแก้ไขการอ้างอิงชื่อนั้นสำหรับแต่ละเซลล์

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

การเรนเดอร์เซลล์แบบไดนามิก

สำหรับแต่ละคอลัมน์ ให้แก้ไขการอ้างอิงตัวเรนเดอร์ของคอลัมน์นั้นและส่งค่าของเซลล์เป็นพร็อพส์ ลูปเดียวสามารถขับเคลื่อนเซลล์ที่มีชนิดแตกต่างกันได้

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

การย้อนกลับไปใช้แท็ก

หาก resolveDynamicComponent ได้รับชื่อที่ไม่ได้ลงทะเบียนไว้ ระบบจะถือว่าชื่อนั้นเป็นสตริงขององค์ประกอบเนทีฟ ดังนั้น "div" จึงเรนเดอร์ div จริงได้อย่างปลอดภัย

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

เหตุใดจึงใช้ฟังก์ชันเรนเดอร์ที่นี่

ฟังก์ชันเรนเดอร์เหมาะอย่างยิ่งเมื่อโครงสร้างถูกคำนวณขึ้นมา เช่น จำนวน children ที่ไม่คงที่ ชนิดคอมโพเนนต์ที่แตกต่างกันในแต่ละรายการ หรือตรรกะที่ต้องใช้เงื่อนไขซ้อนกันหลายชั้นในเทมเพลต

ตรวจสอบความเข้าใจ

ตัวช่วยใดที่แก้ไขการอ้างอิงเป้าหมายได้อย่างปลอดภัย เมื่อเป้าหมายอาจเป็นชื่อคอมโพเนนต์ OR แท็ก HTML เนทีฟ

สรุปทบทวน

ใช้ resolveComponent กับชื่อที่ลงทะเบียนไว้ และใช้ resolveDynamicComponent เมื่อเป้าหมายอาจเป็นแท็ก HTML หรือออบเจ็กต์คอมโพเนนต์ด้วย ส่งต่อ attrs เป็นพร็อพส์ และส่งออบเจ็กต์ slots เป็นอาร์กิวเมนต์ตัวที่สามของ h รูปแบบนี้ใช้สร้างตัวเรนเดอร์คอลัมน์แบบไดนามิกในตารางและตัวห่อหุ้มที่ยืดหยุ่น

คำถามที่พบบ่อย

บทเรียน “คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render”

การสลับคอมโพเนนต์ตามชนิด การแก้ไขคอมโพเนนต์ และการคงสล็อตไว้ในฟังก์ชัน render คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เจาะลึกฟังก์ชัน h()
  2. JSX ใน Vue 3 ด้วย Vite
  3. คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render
  4. รูปแบบคอมโพเนนต์ลำดับสูง (HOC)
← กลับไปที่ Vue Academy