مقدمة لمكونات Vue

المُقدّمة

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

في هذا الدليل ، سنلقي نظرة على ماهية المكون في Vue ، وكيف يعمل ، وكيفية تمرير البيانات والأحداث من خلالها وغير ذلك الكثير.

ما هو مكون Vue؟

المحتوى هي مثيلات قابلة لإعادة الاستخدام لعناصر Vue التي تتضمن قوالب وأنماط وعناصر جافا سكريبت. كل مكون "شيء خاص به" ، على غرار كيف يكون كل عنصر HTML "شيئًا خاصًا به" ، ويسمح لنا كل من مكونات Vue وعناصر HTML باستخدامها كوحدات بناء لصفحات الويب.

يمكنك التفكير في مكونات Vue كعناصر HTML مشبعة بجافا سكريبت ، يمكنك تعريفها والتعامل معها بنفسك.

يتكون تطبيق 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>

قم بإنشاء مكونات 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.

كيفية تمرير البيانات عبر مكونات Vue

تتمثل إحدى فوائد إنشاء المكونات في القدرة على إعادة استخدام التعليمات البرمجية بجعلها معيارية.

افترض أننا نقوم بإنشاء مكون ملف تعريف المستخدم الذي يحتاج إلى تلقي بيانات كل طالب من صفحة الملف الشخصي ؛ في هذه الحالة ، يجب علينا تمرير هذه البيانات لأسفل من مكون الملف الشخصي (المكون الرئيسي) إلى مكون ملف تعريف المستخدم (المكون الفرعي) ، وسنستخدم الخاصيات.

الدعائم

الدعائم هي سمات مخصصة يمكننا تسجيلها في أحد المكونات ، حتى نتمكن من تمرير البيانات من المكون الرئيسي إلى المكون الفرعي باستخدام props الخيار ضمن علامة البرنامج النصي:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

فتحات

فتحات 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

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

افترض أن لدينا مكونًا رئيسيًا (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/