Vue Academy · पाठ

render फ़ंक्शन के साथ डायनेमिक कंपोनेंट

प्रकार के आधार पर कंपोनेंट बदलना, कंपोनेंट रिज़ॉल्यूशन और render फ़ंक्शन में स्लॉट बनाए रखना

पाठ 3, कुल 4 में से13 चरण

render फ़ंक्शन के साथ डायनेमिक कंपोनेंट, CoddyKit पर Vue Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Vue Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

रेंडर फ़ंक्शन में डायनेमिक कंपोनेंट

रनटाइम पर कंपोनेंट बदलने के लिए टेम्पलेट में <component :is="..."> का उपयोग किया जाता है। रेंडर फ़ंक्शन में यही काम रिज़ॉल्व हेल्पर और 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");

यहाँ रेंडर फ़ंक्शन का उपयोग क्यों करें

जब संरचना की गणना करनी हो—जैसे चाइल्ड की बदलती संख्या, प्रत्येक आइटम के अलग कंपोनेंट प्रकार या ऐसा लॉजिक जिसके लिए कई नेस्टेड टेम्पलेट कंडीशनल की आवश्यकता हो—तब रेंडर फ़ंक्शन बहुत उपयोगी होते हैं।

त्वरित जाँच

ऐसे लक्ष्य को सुरक्षित रूप से रिज़ॉल्व करने वाला हेल्पर कौन-सा है जो कंपोनेंट का नाम OR नेटिव HTML टैग हो सकता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

पंजीकृत नामों के लिए resolveComponent और तब resolveDynamicComponent का उपयोग करें जब लक्ष्य HTML टैग या कंपोनेंट ऑब्जेक्ट भी हो सकता है। attrs को प्रॉप्स के रूप में फ़ॉरवर्ड करें और slots ऑब्जेक्ट को तीसरे h तर्क के रूप में पास करें। यही पैटर्न डायनेमिक टेबल कॉलम रेंडरर और लचीले रैपर को सक्षम बनाता है।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 42
पाठ: 156

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “render फ़ंक्शन के साथ डायनेमिक कंपोनेंट” पाठ निःशुल्क है?

हाँ — Vue Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “render फ़ंक्शन के साथ डायनेमिक कंपोनेंट” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Vue Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“render फ़ंक्शन के साथ डायनेमिक कंपोनेंट” में मैं क्या सीखूँगा?

प्रकार के आधार पर कंपोनेंट बदलना, कंपोनेंट रिज़ॉल्यूशन और render फ़ंक्शन में स्लॉट बनाए रखना आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Vue Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Vue Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Vue Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“render फ़ंक्शन के साथ डायनेमिक कंपोनेंट” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Vue Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Vue Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Vue Academy पर वापस जाएँ