كيفية استخدام مكونات Vue 2.0 في تطبيق الزاوي

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

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

لحسن الحظ ، أسفر هذا البحث عن النتائج المرجوة وسأشارك معك كيفية إعادة استخدام مكونات Vue المنفذة بالفعل في تطبيق Angular دون إعادة كتابة مكوناتك!

1. الاستيلاء على المصدر وإعداد صفحتك

بالنسبة لهذا البرنامج التعليمي ، أوصي بفتح jsfiddle أو plunkr ، فقط للبدء. لنبدأ بإضافة تبعياتنا إلى صفحة HTML الخاصة بنا بين عنصر الفتح والإغلاق أو مباشرةً بعد علامة الفتح :


2. إعداد مكون لدينا للاستخدام

المكون الذي سنستخدمه في هذه الحالة هو مثال بسيط بسيط التعديل من المستندات أدناه:

// سجل مكوننا
Vue.component ("عداد بسيط" ، {
  الدعائم: ['initialCounterValue'] ،
  القالب: ''،
  البيانات: وظيفة () {
    إرجاع {
      عداد: this.initialCounterValue
    }
  }،
  أساليب: {
    الزيادة: الوظيفة () {
      this.counter + = 1؛
      this. $ emit ('increment'، this.counter)؛
    }
  }
})؛

سيؤدي هذا المكون عند إنشاء مثيل له إلى تقديم زر HTML. يؤدي النقر فوق هذا الزر إلى زيادة القيمة الرقمية لخاصية مثيل "عداد".

تحتوي خاصية "الأساليب" الخاصة بخيارات المكون لدينا على خريطة للوظائف التي يمكن الرجوع إليها أثناء التفاعلات مع عنصر واجهة المستخدم. يستضيف هذا المثال وظيفة "الزيادة" التي يتم تشغيلها عند النقر فوق الزر. هذا المشغل يزيد من قيمة خاصية "العداد" وينبعث أيضًا حدثًا عبر طريقة المثيل $ emit. سيتم إرسال هذا الحدث المنبعث لأعلى إلى مثيل مُنشئ جذر Vue ليتم التقاطه ومعالجته بواسطة Angular (المزيد حول هذا لاحقًا). تحتوي خاصية "الدعائم" في المُنشئ على قائمة بالسمات التي يُتوقع الإعلان عنها على مكوننا عند استخدامها في html ، في هذه الحالة "initialCounterValue":

 

3. Bootstrap تطبيق الزاوي لدينا

دعنا نعد الزاوي ، بما في ذلك التوجيه الذي سيكون بمثابة نقطة التفاعل مع المكون لدينا:

/ / سجل وحدة الزاوي لدينا
angular.module ('التطبيق' ، [])
  .directive ('simpleCounterWrapper' ، function () {
    إرجاع {
      تقييد: "أ" ،
      الرابط: الوظيفة (النطاق ، العنصر $) {
        // Vue منطق التفاعل المكون يذهب هنا
      }
    }
  })؛
// ابدأ تطبيقنا مع الوحدة التي تم إنشاؤها
angular.bootstrap (document.body، ['app'])؛

سيبدو HTML لدينا كما يلي:

  

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

  

4. قم بإعداد "حافلة" لدينا

تتيح لنا طريقة المنشئ في Vue إنشاء نظام أساسي لـ "ناقل الأحداث" الذي سنستخدمه للتعامل مع التواصل بين كلا الإطارين. داخل وظيفة الرابط في التوجيه الزاوي لدينا ، تشمل ما يلي:

/ / إنشاء مثيل الجذر لدينا
scope.vue = جديد Vue ({
  el: "عداد بسيط"
})

في هذه المرحلة ، سترى الزر الذي يتم عرضه على الصفحة. يؤدي النقر فوق الزر إلى زيادة القيمة كما هو متوقع ويصدر الحدث "زيادة".

إذا كيف يمكننا أن نخبر Angular حول هذا الحدث؟ عن طريق إنشاء طريقة على مثيل Vue الجذر الخاص بنا واستدعاء هذه الطريقة على معالج الأحداث المخصص "زيادة" للمكون:

// نطاق الزاوي الملكية
scope.countValue = 0؛
/ / إنشاء مثيل الجذر لدينا
scope.vue = جديد Vue ({
  el: "عداد بسيط" ،
  أساليب: {
    updateAngularScopeProperty: function (value) {
      نطاق. $ application (function () {
        scope.countValue = قيمة ؛
      })؛
    }
  }
})؛

وفي HTML لدينا:

     {{}} countValue

تعبير السلسلة ‘{{countValue}} 'هو إشارة إلى الخاصية في النطاق الزاوي التي سيتم تحديثها عند النقر فوق الزر. في هذه المرحلة ، لدينا مثال عملي على كيفية تعاملنا مع Angular و Vue مع بعضهما البعض. آخر شيء يمكننا القيام به في هذا المثال هو السماح لخاصية initialCounterValue أن تكون قابلة للتكوين عبر Angular:

// نطاق الزاوي الملكية
scope.countValue = 0؛
/ / إنشاء مثيل الجذر لدينا
scope.vue = جديد Vue ({
  el: "عداد بسيط" ،
  البيانات: وظيفة () {
    إرجاع {
      initialCounterValue: scope.countValue
    }
  }،
  أساليب: {
    updateAngularScopeProperty: function (value) {
      نطاق. $ application (function () {
        scope.countValue = قيمة ؛
      })؛
    }
  }
})؛

وفي HTML لدينا:

     {{}} countValue

استنتاج

وهذا يختتم البرنامج التعليمي لدينا. تعرف على المزيد حول Vue وكيف تتواصل المكونات مع بعضها البعض في وثائقها. يمكنك عرض هذا المثال على plunkr. إليك كمان صنعته سابقًا.

يرجى مشاركة أفكارك - أحب بعض الملاحظات البناءة :-)