Vue Academy · درس

مشكلة تمرير الخصائص عبر المكوّنات

سبب إضرار تمرير الخصائص بقابلية الصيانة، وما الذي يحلّه provide/inject، ومتى يُستخدم

مشكلة تمرير الخصائص عبر المكوّنات درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

ما هو تمرير props المتسلسل

يتمثل تمرير props المتسلسل في تمرير البيانات عبر طبقات متعددة من المكوّنات لمجرد الوصول إلى مكوّن متداخل بعمق. ويجب على كل مكوّن وسيط قبول الـ prop وتمريره، حتى إن لم يستخدمه مطلقًا.

شجرة مكوّنات عميقة

تخيلوا شجرة: App -> Layout -> Page -> Section -> Widget. يحتاج Widget الموجود في الأسفل إلى السمة الحالية، لكن App الموجود في الأعلى وحده يعرفها.

App
  Layout
    Page
      Section
        Widget  <-- needs "theme"

تمرير القيمة عبر App

يحتفظ App بالسمة ويمررها إلى Layout على هيئة prop.

<!-- App.vue -->
<Layout :theme="theme" />

يمرر Layout القيمة إلى الأمام

لا يستخدم Layout السمة، لكنه يجب أن يعلن عنها ويمررها إلى المستوى التالي، لمجرد الوصول إليه.

<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />

يمرر Page القيمة أيضًا

يكرر Page التعليمات النمطية نفسها — الإعلان ثم التمرير — رغم أنه لا يهتم بالسمة.

<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />

يمرر Section القيمة مرة أخرى

ويتكرر الأمر مرة أخرى في Section. تضيف كل طبقة عمليات ربط متكررة لا علاقة لها بمسؤولية تلك الطبقة.

<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />

يستخدم Widget القيمة أخيرًا

لا يستهلك Widget السمة فعليًا إلا في الأسفل. وكانت الطبقات الأربع السابقة مجرد قنوات تمرير.

<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itself

لماذا يسبب هذا مشكلة

يسبب تمرير props المتسلسل عدة مشكلات:

تعليمات نمطية متكررة في كل مكوّن وسيط
تؤدي إعادة الهيكلة إلى كسر العديد من الملفات عند تغيير اسم الـ prop
تحجب props الوسيطة ما يحتاج إليه كل مكوّن فعليًا
تصعّب إضافة قيم مشتركة جديدة

تزداد المشكلة مع كثرة القيم

أضيفوا الآن user وlocale وpermissions. يجب تمرير كل منها عبر الطبقات الأربع، مما يضاعف التعليمات النمطية المتكررة.

<Layout
  :theme="theme"
  :user="user"
  :locale="locale"
  :permissions="permissions"
/>

ليست كل قيمة مشتركة مناسبة للـ props

تُعد props رائعة للتواصل المباشر بين الأب والابن. لكن بالنسبة إلى القيم المطلوبة بعمق داخل شجرة فرعية — مثل السمة والمستخدم الحالي وi18n — فإن تمريرها عبر الطبقات ليس الأداة المناسبة. نحتاج إلى طريقة لتوفير البيانات لجميع العناصر المتفرعة مباشرةً.

استخدام Provide و Inject

يتيح provide / inject في Vue للعنصر السلف توفير بيانات يمكن لأي عنصر متفرع طلبها مباشرةً، مع تجاوز كل طبقة وسيطة. تتناول الدروس التالية عملية التوفير والحقن.

تحقق سريع

ما الوصف الأفضل لتمرير props المتسلسل؟

مراجعة

رأيتم كيف يجبر تمرير props المتسلسل كل مكوّن وسيط في شجرة عميقة على الإعلان عن props لا يستخدمها وتمريرها، مما ينشئ تعليمات نمطية متكررة ويجعل إعادة الهيكلة هشة. ويُعد Provide وInject الحل الأنظف للقيم المشتركة بعمق.

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

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

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

ماذا ستتعلم في «مشكلة تمرير الخصائص عبر المكوّنات»؟

سبب إضرار تمرير الخصائص بقابلية الصيانة، وما الذي يحلّه provide/inject، ومتى يُستخدم تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

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

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

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

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

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

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