مكونات Vue.js

المكونات هي وحدات مفردة ومستقلة للواجهة. يمكن أن يكون لديهم حالتهم الخاصة ، وترميزهم وأسلوبهم.

المكونات هي وحدات مفردة ومستقلة للواجهة. يمكن أن يكون لديهم حالتهم الخاصة ، وترميزهم وأسلوبهم.

كيفية استخدام المكونات

يمكن تعريف مكونات Vue بأربع طرق رئيسية.

لنتحدث في الكود.

الأول هو:

new Vue({
  /* options */
})

والثاني هو:

Vue.component('component-name', {
  /* options */
})

والثالث هو استخدام المكونات المحلية: مكونات لا يمكن الوصول إليها إلا من خلال مكون معين ، وغير متوفرة في مكان آخر (رائعة للتغليف).

الرابع في.vueالملفات ، وتسمى أيضًامكونات الملف الفردي.

دعنا نتعمق في أول 3 طرق بالتفصيل.

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

في SPA ، حيث يكون Vue هو الذي يبني HTML ، من الشائع استخدام مكونات الملف الفردي لأنها أكثر ملاءمة.

يمكنك إنشاء Vue بتثبيته على عنصر DOM. اذا كان لديك<div id="app"></div>علامة ، سوف تستخدم:

new Vue({ el: '#app' })

مكون مهيأ معnew Vueليس له اسم علامة مطابق ، لذلك فهو عادةً مكون الحاوية الرئيسي.

يتم تهيئة المكونات الأخرى المستخدمة في التطبيق باستخدامVue.component(). يتيح لك هذا المكون تحديد علامة ، والتي يمكنك من خلالها تضمين المكون عدة مرات في التطبيق ، وتحديد ناتج المكون فيtemplateمنشأه:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({ el: ‘#app’ })

Tech Wiki Online!