Vue Academy · درس

المكوّنات الديناميكية باستخدام دوال render

تبديل المكوّنات حسب النوع، وحلّ المكوّنات، والحفاظ على Slots في دوال render

المكوّنات الديناميكية باستخدام دوال render درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في 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));

تحديد type من props

مرروا اسم المكوّن عبر prop، ثم حلّوه عند كل تصيير. وهذا هو المكافئ في دوال التصيير لـ :is.

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

تمرير props

انشروا السمات الواردة على المكوّن الذي جرى حلّه، حتى يتلقى الابن الديناميكي كل ما تلقاه المكوّن الأب.

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

تمرير slots

تصل slots إلى الابن عبر الوسيط الثالث في h. مرروا كائن slots الخاص بالأب مباشرةً حتى يعرضها المكوّن الديناميكي.

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

مصيّر قابل لإعادة الاستخدام

يؤدي الجمع بين تمرير السمات وslots إلى غلاف رقيق يصيّر أي مكوّن بالاسم ويمرر كل شيء إليه.

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

مصيّرات الأعمدة الديناميكية

تتيح جداول البيانات غالباً لكل عمود تحديد مكوّن التصيير الخاص به. خزّنوا اسم المكوّن لكل عمود، ثم حلّوه لكل خلية.

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

تصيير الخلايا ديناميكياً

لكل عمود، حلّوا مصيّره ومرروا قيمة الخلية بوصفها prop. وتقود حلقة واحدة أنواع الخلايا المختلفة.

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");

لماذا نستخدم دوال التصيير هنا

تتألق دوال التصيير عندما تكون البنية محسوبة، مثل وجود أعداد متغيرة من العناصر الفرعية أو أنواع مكوّنات مختلفة لكل عنصر، أو وجود منطق يتطلب العديد من الشروط المتداخلة في القالب.

اختبار سريع

ما الدالة المساعدة التي تحل بأمان هدفاً قد يكون اسم مكوّن أو وسم HTML أصلياً؟

خلاصة

استخدموا resolveComponent للأسماء المسجّلة، وresolveDynamicComponent عندما يمكن أن يكون الهدف أيضاً وسم HTML أو كائن مكوّن. مرروا attrs بوصفها props، ومرروا كائن slots بوصفه الوسيط الثالث في h. يدعم هذا النمط مصيّرات أعمدة الجداول الديناميكية والأغلفة المرنة.

الأسئلة الشائعة

هل درس «المكوّنات الديناميكية باستخدام دوال render» مجاني؟

نعم — نص درس «المكوّنات الديناميكية باستخدام دوال render» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «المكوّنات الديناميكية باستخدام دوال render»؟

تبديل المكوّنات حسب النوع، وحلّ المكوّنات، والحفاظ على Slots في دوال render تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «المكوّنات الديناميكية باستخدام دوال render»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

شرح متعمق للدالة h()
‏JSX في Vue 3 باستخدام Vite
المكوّنات الديناميكية باستخدام دوال render
نمط المكوّنات عالية الترتيب (HOC)

← العودة إلى Vue Academy