تسمح لك أدوات Vue بتسجيل سمات مخصصة على أحد المكونات. اكتشف بالضبط كيفية استخدامها.
تتمثل إحدى الميزات الرئيسية لـ Vue في بنيتها المعيارية ، والتي تمكنك من إنشاء تطبيقات الويب من خلال الجمع بين المكونات الصغيرة القابلة لإعادة الاستخدام. يتيح لك ذلك تحديث تطبيق الويب الخاص بك وصيانته بسهولة.
يمكن أن يكون لكل مكون في Vue مجموعته الخاصة من البيانات والطرق ، والتي يمكنك تمريرها إلى المكونات الفرعية الخاصة به باستخدام الخاصيات. هنا ، ستتعلم كيفية استخدام الخاصيات في Vue لتمرير البيانات من الأصل إلى المكونات الفرعية.
ما هي الدعائم في Vue؟
الدعائم - اختصار لكلمة "خصائص" - هي سمات مخصصة في Vue يمكن للمكون الرئيسي تمريرها إلى مكوناته الفرعية.
في Vue ، تمرر المكونات الرئيسية الدعائم إلى المكونات الفرعية في تدفق أحادي الاتجاه. هذا يعني أن المكونات الفرعية يمكنها فقط قراءة واستخدام هذه الخاصيات التي تم تمريرها ولكن لا يمكنها تعديل البيانات.
يتيح لك استخدام الدعائم إنشاء مكونات قابلة لإعادة الاستخدام يمكنك تطبيقها في جميع أنحاء التطبيق الخاص بك. توفر لك الدعائم الوقت والجهد ، حيث يمكنك إعادة استخدام المكونات بدلاً من إنشاء مكونات جديدة من البداية.
كيفية تمرير الدعائم في Vue
دعائم التمرير في Vue بسيطة ومختلفة عن الطريقة التي تمر بها الدعائم في React. لتمرير خاصية من مكوِّن رئيسي إلى مكوِّن فرعي في Vue ، استخدم خيار props في البرنامج النصي للمكوِّن الفرعي.
هذا مثال:
المكون الفرعي
<نموذج>
<شعبة>
<h1>{{ عنوان }}h1>
<ص>{{ رسالة }}ص>
<ص>{{ عنوان البريد الإلكتروني }}ص>
شعبة>
نموذج>
<النصي>
تصدير الافتراضي {
الاسم: "ChildComponent" ،
الدعائم: ["العنوان" ، "الرسالة" ، "عنوان البريد الإلكتروني"] ،
};
النصي>
يصف مقطع الكود أعلاه مكون Vue child الذي يستخدم الخاصيات لتمرير البيانات من مكون رئيسي. يشتمل المكون على ثلاثة عناصر HTML تعرض امتداد الملف عنوان, رسالة، و عنوان البريد الإلكتروني الخصائص مع الاستيفاء.
ال الدعائم الخيار في المكون الفرعي يأخذ مجموعة من الخصائص. تحدد هذه المصفوفة الخصائص التي يقبلها المكون الفرعي من المكون الرئيسي.
فيما يلي مثال لمكون Vue الأصل الذي يقوم بتمرير البيانات إلى المكون الفرعي باستخدام الدعائم:
المكون الرئيسي
<نموذج>
<شعبة>
<مكون تابع
العنوان = "Hello World"
message = "هذه رسالة من المكون الرئيسي"
emailAddress = "[email protected]"
/>
شعبة>
نموذج><النصي>
استيراد ChildComponent من "./components/ChildComponent.vue" ؛
تصدير الافتراضي {
الاسم: "ParentComponent" ،
عناصر: {
مكون الطفل ،
},
};
النصي>
يمرر المكون الرئيسي في كتلة التعليمات البرمجية أعلاه ثلاث دعائم إلى المكون الفرعي. تقوم كتلة التعليمات البرمجية بتمرير القيم الثابتة إلى ملف عنوان, رسالة، و عنوان البريد الإلكتروني الدعائم.
يمكنك أيضًا تمرير القيم الديناميكية إلى الدعائم الخاصة بك باستخدام ملف v- ربط التوجيه. v- ربط هو توجيه المستخدمة في Vue لربط البيانات لسمات HTML.
فيما يلي مثال على المكون الرئيسي Vue الذي يستخدم الامتداد v- ربط توجيه لتمرير القيم الديناميكية إلى الدعائم:
المكون الرئيسي
<نموذج>
<شعبة>
<مكون تابع
: title = "title"
: message = "message"
: emailAddress = "emailAddress"
/>
شعبة>
نموذج><النصي>
استيراد ChildComponent من "./components/ChildComponent.vue" ؛
تصدير الافتراضي {
الاسم: "ParentComponent" ،
عناصر: {
مكون الطفل ،
},
بيانات() {
يعود {
العنوان: "مرحبا عزيزي" ،
الرسالة: "كيف حالك" ،
عنوان البريد الإلكتروني: "[email protected]" ،
};
},
};
النصي>
باستخدام v- ربط توجيه لتمرير البيانات إلى المكون الفرعي ، يمكنك تحديث قيم الخاصيات بناءً على حالة المكون الرئيسي. على سبيل المثال ، عن طريق تغيير عنوان خاصية البيانات في المكون الرئيسي ، فإن عنوان سيتم أيضًا تحديث الخاصية التي تم تمريرها إلى المكون الفرعي.
هذه الطريقة لتعريف الدعائم كمصفوفة من السلاسل هي نمط مختصر. كل سلسلة في المصفوفة تمثل دعامة. هذه الطريقة مثالية عندما تكون جميع الخاصيات في المصفوفة متشابهة نوع بيانات JavaScript.
تعريف الدعائم ككائن في Vue
يسمح تعريف الخاصيات ككائن JavaScript بدلاً من مصفوفة بتخصيص أفضل لكل خاصية. يتيح لك تعريف الخاصيات ككائن في مكون تحديد نوع البيانات المتوقع والقيمة الافتراضية لكل خاصية.
بالإضافة إلى ذلك ، يمكنك وضع علامة على خاصيات معينة على أنها مطلوبة ، مما يؤدي إلى إطلاق تحذير إذا لم يتم توفير الخاصية عندما يكون المكون قيد الاستخدام. يقدم تعريف الخاصيات ككائن مزايا عديدة مقارنة بتعريف الخاصيات كمصفوفة ، بما في ذلك:
- يؤدي تحديد نوع البيانات المتوقعة والقيمة الافتراضية لكل خاصية إلى تسهيل فهمك لك ولفريق المطورين لكيفية استخدام المكوِّن بالضبط.
- من خلال وضع علامة على الدعائم على النحو المطلوب ، يمكنك اكتشاف الأخطاء في وقت مبكر من عملية التطوير وتقديم المزيد من المعلومات إلى فريق المطورين.
فيما يلي مثال على كيفية تعريف الخاصيات ككائن في مكون Vue.js:
<نموذج>
<شعبة>
<h1>{{ عنوان }}h1>
<ص>{{ رسالة }}ص>
<ص>{{ عنوان البريد الإلكتروني }}ص>
شعبة>
نموذج>
<النصي>
تصدير الافتراضي {
الاسم: "ChildComponent" ،
الدعائم: {
عنوان: {
اكتب: سلسلة ،
الافتراضي: "العنوان الافتراضي" ،
},
رسالة: {
اكتب: سلسلة ،
الافتراضي: "الرسالة الافتراضية" ،
},
عنوان البريد الإلكتروني: {
اكتب: سلسلة ،
مطلوب: صحيح ،
},
},
};
النصي>
كتلة التعليمات البرمجية هذه هي مثال على مكون Vue.js الذي يستخدم الخاصيات لتمرير البيانات من مكون رئيسي إلى مكون فرعي. تُعرّف كتلة التعليمات البرمجية هذه الخاصيات على أنها كائنات ذات نوع وقيمة افتراضية أو علامة مطلوبة.
تحدد كتلة التعليمات البرمجية عنوان و رسالة الدعائم كسلاسل مع أ تقصير قيمة و عنوان البريد الإلكتروني دعامة كملف مطلوب خيط.
اختر أفضل طريقة تناسب تطبيق Vue الخاص بك
لقد تعلمت كيفية تعريف الخاصيات كمصفوفة وكائن. يجب أن يتناسب تفضيلاتك مع الاحتياجات المحددة لتطبيقك.
يثبت Vue نفسه كإطار عمل JavaScript مرن للغاية. يوفر الكثير من الأساليب والخيارات لتحقيق نفس الهدف مع مزايا مختلفة لأي من الخيارات أو الطرق التي تختار العمل بها.
