المُقدّمة
عند تطوير تطبيق كبير ، من الأفضل دائمًا تقسيمه إلى مكونات أصغر لتسهيل قراءة الكود وتنظيمه وصيانته. يفهم معظم مبتدئين Vue ما هي المكونات على الأقل من الناحية المفاهيمية ، لكنهم قد لا يفهمون ما يمكنهم وما لا يمكنهم فعله بشكل كامل.
في هذا الدليل ، سنلقي نظرة على ماهية المكون في Vue ، وكيف يعمل ، وكيفية تمرير البيانات والأحداث من خلالها وغير ذلك الكثير.
ما هو مكون Vue؟
المحتوى هي مثيلات قابلة لإعادة الاستخدام لعناصر Vue التي تتضمن قوالب وأنماط وعناصر جافا سكريبت. كل مكون "شيء خاص به" ، على غرار كيف يكون كل عنصر HTML "شيئًا خاصًا به" ، ويسمح لنا كل من مكونات Vue وعناصر HTML باستخدامها كوحدات بناء لصفحات الويب.
يمكنك التفكير في مكونات Vue كعناصر HTML مشبعة بجافا سكريبت ، يمكنك تعريفها والتعامل معها بنفسك.
يتكون تطبيق Vue النموذجي من العديد من المكونات التي يمكن إعادة استخدامها عدة مرات حسب الحاجة.
على سبيل المثال ، يحتوي موقع الويب المعتاد على أقسام تظهر في جميع الصفحات - شريط التنقل والرأس والتذييل وما إلى ذلك. لذلك ، يعتبر جعل كل واحد منهم مكونًا منفصلاً من الممارسات الجيدة. بهذه الطريقة ، نقوم بإنشاء كود جيد التنظيم وقابل للقراءة وقابل لإعادة الاستخدام ويمكن صيانته بسهولة:
كيفية إنشاء مكون Vue
هناك طريقتان أساسيتان لإنشاء مكون Vue ، اعتمادًا على كيفية إنشاء مشروعنا - مع أو بدون إعداد البناء. في الحالة الأولى ، يتم تخزين كل مكون في ملف منفصل. في الحالة الثانية ، يمكن أن يكون هناك مكونات متعددة في ملف واحد.
ملحوظة: شرح ما هو ملف بناء الإعداد وكيفية تنفيذه بعيدًا عن نطاق هذا الدليل. إذا كنت تريد معرفة المزيد عن أساسيات Vue ، فإن أفضل مكان للبدء هو ملف "بداية سريعة" مقال من وثائق Vue الرسمية.
قم بإنشاء مكونات Vue باستخدام إعداد البناء
يتم إنشاء معظم المشاريع باستخدام امتداد بناء الإعداد، والتي تمكننا من إنشاء مكونات ذات ملف واحد (SFCs) - ملفات مكونات مخصصة بامتداد .vue
امتداد. يسمح لنا هذا بتغليف قالب ومنطق وتصميم مكون Vue في ملف واحد:
<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>
ملحوظة: لتجنب التعارض مع عناصر HTML الحالية والمستقبلية ، من الأفضل دائمًا استخدام أسماء متعددة الكلمات بدلاً من الأسماء المكونة من كلمة واحدة عند تسمية مكوناتنا. لا ينطبق هذا على المكونات المضمنة مثل مكون الجذر (App
, Transition
، وما إلى ذلك وهلم جرا).
قم بإنشاء مكونات Vue بدون إعداد البنية
إذا كنت ، لأي سبب من الأسباب ، لا تستطيع استخدام مدير الحزم مثل npm
لتثبيت Vue على جهازك ، لا يزال بإمكانك استخدام Vue في تطبيقك. بديل لمبنى Vue باستخدام npm
هو تثبيت Vue عبر ملف CDN (شبكة توصيل المحتوى) مباشرة في تطبيقك. دعنا ننتقل سريعًا إلى طريقة إنشاء مكون Vue.
سيمكننا تثبيت Vue بدون build من استخدام وظائف خاصة بـ Vue كما نفعل مع JavaScript عادي. يشبه بناء الجملة إلى حد ما ما رأيناه في SFCs المعتادة:
export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}
في هذا الدليل ، سنستخدم ملف بناء جملة SFC، لأن هذه هي الطريقة الأكثر استخدامًا لإنشاء المكونات.
كيفية تسجيل المكونات في Vue
حتى الآن ، رأينا كيفية إنشاء مكونات في Vue. ستكون الخطوة التالية هي استخدام هذه المكونات داخل مكون آخر (التسلسل الهرمي بين الوالدين والطفل).
للقيام بذلك ، يجب علينا أولاً تسجيل المكونات التي نريد استخدامها. يستلزم هذا التسجيل استيراد المكونات ثم تسجيلها. هناك خياران للقيام بذلك - شامل و التسجيل المحلي.
مكونات Vue - التسجيل العالمي
المكونات المسجلة عالميًا ، كما يوحي الاسم ، متوفرة عالميًا ، مما يعني أنه يمكن استخدامها في أي مكون من مكونات تطبيقنا دون الحاجة إلى استيرادها مرة أخرى. يتم تحقيق ذلك عن طريق تسجيل مكون باستخدام app.component()
الأسلوب:
import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)
في حالة وجود العديد من المكونات ، يمكننا ذلك سلسلة لهم بهذه الطريقة:
app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)
بعد أن قمنا بتسجيل مكوناتنا ، يمكننا استخدامها في قالب أي مكون داخل هذا التطبيق باستخدام الصيغة التالية:
<ChildComponent/>
<ProfileComponent/>
مكونات Vue - التسجيل المحلي
سنستخدم التسجيل المحلي في معظم الحالات لأنه يتيح لنا تحديد نطاق توفر المكونات المسجلة لدينا. استيراد هذه المكونات ثم إضافتها إلى ملف components
الخيار يحقق هذا:
<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>
عند تسمية المكونات ، استخدم CamelCase لتوضيح أن هذا مكون Vue وليس عنصر HTML أصلي في القوالب. هذا أيضًا يجعل من السهل استيراد المكونات وتسجيلها في JavaScript.
ملحوظة: للإشارة إلى المكون المسجل لدينا داخل النموذج ، نستخدم عادةً CamelCase or حالة كباب العلامات - <MyComponent />
or <my-component />
، على التوالي.
كيفية تمرير البيانات عبر مكونات Vue
تتمثل إحدى فوائد إنشاء المكونات في القدرة على إعادة استخدام التعليمات البرمجية بجعلها معيارية.
افترض أننا نقوم بإنشاء مكون ملف تعريف المستخدم الذي يحتاج إلى تلقي بيانات كل طالب من صفحة الملف الشخصي ؛ في هذه الحالة ، يجب علينا تمرير هذه البيانات لأسفل من مكون الملف الشخصي (المكون الرئيسي) إلى مكون ملف تعريف المستخدم (المكون الفرعي) ، وسنستخدم الخاصيات.
الدعائم
الدعائم هي سمات مخصصة يمكننا تسجيلها في أحد المكونات ، حتى نتمكن من تمرير البيانات من المكون الرئيسي إلى المكون الفرعي باستخدام props
الخيار ضمن علامة البرنامج النصي:
<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>
ملحوظة: يمكنك معرفة المزيد حول الخاصيات وكيفية تمرير أنواع مختلفة من البيانات من المكون الرئيسي إلى المكون الفرعي في "دليل إلى Vue Props".
فتحات
فتحات Vue هي مساحات محجوزة تسمح لنا بتمرير أي نوع من المحتوى من مكون إلى آخر. يمنح هذا تحكمًا مركزيًا أكثر من الخاصيات لأنه ، على عكس الخاصيات ، يتحكم المكون الرئيسي في المحتوى داخل المكون الفرعي. على سبيل المثال ، يمكننا عمل الزر التالي:
<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>
ثم يمكننا استخدام هذا المكون في أي مكان نريده ومنحه المحتوى الذي نرغب فيه. عدم منحه محتوى يعني أنه سيستفيد من القيمة الافتراضية التي قدمناها له (انقر فوقي):
<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>
كيفية إصدار الأحداث من مكونات Vue
لقد تعلمنا أن الخاصيات تُستخدم لإرسال البيانات من المكون الرئيسي وصولاً إلى المكون الفرعي. لكننا قد نتساءل عما إذا كانت هناك طريقة لإرسال شيء من المكون الفرعي إلى المكون الرئيسي. والجواب هو نعم فعلا، يمكن إرسال الأحداث من المكون الفرعي إلى المكون الرئيسي أيضًا.
تحقق من دليلنا العملي العملي لتعلم Git ، مع أفضل الممارسات ، والمعايير المقبولة في الصناعة ، وورقة الغش المضمنة. توقف عن أوامر Googling Git وفي الواقع تعلم ذلك!
افترض أن لدينا مكونًا رئيسيًا (App.vue
) الذي يحتوي على مكون فرعي واحد (MyBlogPost.vue
). علاوة على ذلك ، يحتوي المكون الفرعي على زر من المفترض أن يغير العنوان.
افترض أننا نريد تغيير عنوان صفحتنا عند النقر فوق الزر ، بحيث يتم تشغيل وظيفة:
<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>
وسيبدو المكون الفرعي كما يلي:
<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>
وفي الختام
في هذا الدليل ، تعلمنا كيفية العمل مع المكونات في Vue ، وهو أمر ضروري لأي شخص يستخدم Vue. تعلمنا أيضًا كيفية إرسال البيانات واستلامها ، وكذلك كيفية إرسال الأحداث.
- محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
- بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
- المصدر https://stackabuse.com/introduction-to-vue-components/
- 1
- 10
- 7
- 9
- a
- القدرة
- من نحن
- إنجاز
- في الواقع
- ملاحظه
- الكل
- يسمح
- البديل
- دائما
- و
- آخر
- إجابة
- أي شخص
- في أى مكان
- التطبيق
- تظهر
- تطبيق
- التقديم
- البند
- سمات
- توفر
- متاح
- الأساسية
- الأساسيات
- لان
- مبتدئين
- الفوائد
- أفضل
- Beyond
- Blocks
- الحدود
- استراحة
- نساعدك في بناء
- ابني
- مدمج
- زر
- لا تستطيع
- حقيبة
- الحالات
- مركزية
- تغيير
- طفل
- واضح
- الكود
- عادة
- عنصر
- مكونات
- من الناحية النظرية
- اختتام
- نظرت
- يحتوي
- محتوى
- مراقبة
- ضوابط
- استطاع
- خلق
- خلق
- خلق
- CSS
- على
- البيانات
- مخصصة
- الترتيب
- التوصيل
- اعتمادا
- تطوير
- مختلف
- مباشرة
- توثيق
- فعل
- إلى أسفل
- Dropbox
- كل
- أسهل
- بسهولة
- عناصر
- تمكين
- تمكن
- أساسي
- أحداث
- كل
- مثال
- القائمة
- شرح
- تمديد
- فشل
- قم بتقديم
- ملفات
- الاسم الأول
- تركز
- متابعيك
- النموذج المرفق
- تبدأ من
- تماما
- وظيفة
- وظائف
- علاوة على ذلك
- مستقبل
- بوابة
- منح
- يعطي
- العالمية
- على الصعيد العالمي
- Go
- خير
- توجيه
- تشابك الايدى
- وجود
- تسلسل
- تحوم
- كيفية
- كيفية
- HTML
- HTTPS
- اي كون
- فكرة
- استيراد
- استيراد
- in
- تتضمن
- شامل
- تثبيت
- المُقدّمة
- IT
- جافا سكريبت
- كبير
- تعلم
- تعلم
- تعلم
- LG
- محلي
- بحث
- يبدو مثل
- آلة
- صنع
- المحافظة
- يمكن الحفاظ عليها
- جعل
- يصنع
- القيام ب
- مدير
- كثير
- يعني
- طريقة
- ربما
- وحدات
- الأكثر من ذلك
- أكثر
- متعدد
- الاسم
- أسماء
- تسمية
- محلي
- إحتياجات
- شبكة
- جديد
- التالي
- كثير
- رسمي
- ONE
- خيار
- مزيد من الخيارات
- الخاصة
- صفقة
- نفذ
- المكان
- عادي
- أفلاطون
- الذكاء افلاطون البيانات
- أفلاطون داتا
- عملية
- ممارسة
- ملفي الشخصي
- تنفيذ المشاريع
- مشروع ناجح
- سريع
- بسرعة
- عرض
- سبب
- تسلم
- أحمر
- تسجيل جديد
- مسجل
- تسجيل
- التسجيل
- محفوظة
- قابلة لإعادة الاستخدام
- حلقة
- جذر
- نطاق
- الثاني
- أقسام
- مستقل
- شادو
- مماثل
- عزباء
- حالة
- فتحات
- الأصغر
- So
- شيء
- قليلا
- المساحات
- المعايير
- بداية
- خطوة
- لا يزال
- قلة النوم
- تخزين
- بناء
- طالب
- تقدم
- هذه
- مفترض
- SVG
- بناء الجملة
- TAG
- أخذ
- قالب
- النماذج
- •
- وبالتالي
- شيء
- عبر
- مرات
- عنوان
- إلى
- جدا
- انتقال
- أثار
- صحيح
- أنواع
- نموذجي
- عادة
- فهم
- us
- تستخدم
- مستخدم
- قيمنا
- Ve
- بواسطة
- VUE
- طرق
- الويب
- الموقع الإلكتروني
- ابحث عن
- ما هي تفاصيل
- التي
- سوف
- في غضون
- بدون
- للعمل
- أعمال
- العالم
- XML
- أنت
- حل متجر العقارات الشامل الخاص بك في جورجيا
- نفسك
- زفيرنت