Как да използвате компоненти Vue 2.0 в ъглово приложение

Наскоро ни беше възложена задачата да разработим UI комплект, който да се използва като световно ръководство за стил в нашите продукти. Част от този процес включваше избор на рамка с възможности за обвързване на данни, която да се използва при разработването на нашите интерактивни джаджи. За щастие намирането на един не беше голямо предизвикателство, когато видим притока от опции, които трябва да изберем, а именно Angular, React, Knockout и т.н. ...

Накратко, в крайна сметка се разбрахме с Vue поради лекия й източник, високоефективната и блестяща документация с лесни за следване примери. Това, което трябваше да гарантираме обаче, е гъвкавостта да се интегрираме с други рамки. Тъй като нашите уеб приложения са изградени в Angular, беше от първостепенно значение Vue да не доведе до големи провали.

За щастие това разследване даде желани резултати и аз ще споделя с вас как да използвате повторно вече внедрените компоненти на Vue в приложение Angular, без да пренаписвате вашите компоненти!

1. Вземете източника и настройте вашата страница

За този урок препоръчвам да отворите jsfiddle или plunkr, само за да започнете. Нека започнем с добавяне на нашите зависимости към нашата HTML страница между отварящия и затварящия елемент или директно след отварящия маркер :


2. Подгответе нашия компонент за употреба

Компонентът, който ще използваме в този случай, е леко коригиран пример с прост брояч от документите по-долу:

// Регистрирайте нашия компонент
Vue.component („обикновен брояч“, {
  реквизит: ['InitiCounterValue'],
  template: '<бутон v-on: click = "прираст"> {{counter}} ',
  данни: функция () {
    връщане {
      брояч: this.initialCounterValue
    }
  }
  методи: {
    нарастване: функция () {
      this.counter + = 1;
      това. $ emit ("прираст", this.counter);
    }
  }
});

Този компонент, когато се инстанцира, ще направи HTML бутон. Щракването върху този бутон увеличава числовата стойност на свойството „counter“.

Свойството „Методи“ на нашите опции за компоненти съдържа карта от функции, които могат да бъдат препратени по време на взаимодействие с джаджа. Този пример е домакин на функция "инкремент", която се задейства при натискане на бутона. Този тригер увеличава стойността на свойството „counter“ и също така излъчва събитие чрез метода му $ emit instance. Това излъчено събитие ще бъде изпратено нагоре към екземпляр на корен конструктор на Vue, за да бъде заловен и обработен от Angular (повече за това по-късно). Свойството „реквизит“ на конструктора съдържа списък от атрибути, които се очаква да бъдат декларирани на нашия компонент, когато се използват в нашия html, в този случай „InitiCounterValue“:

 

3. Стартирайте нашето ъглово приложение

Нека подготвим Angular, включително директива, която ще служи като точка на взаимодействие с нашия компонент:

// Регистрирайте нашия ъглов модул
angular.module ("приложение", [])
  .directive ('simpleCounterWrapper', функция () {
    връщане {
      ограничи: 'A',
      връзка: функция (обхват, $ елемент) {
        // Логиката за взаимодействие на компоненти Vue е тук
      }
    }
  });
// Стартирайте нашето приложение с нашия създаден модул
angular.bootstrap (document.body, ['app']);

Нашият HTML ще изглежда така:

  

Едно нещо, което трябва да се обърне внимание, е Angular да се опита да компилира всеки елемент, който прилича на персонализирана директива, в нашия случай simple-counter. За да спрат Angular да прави това, те предоставят директива, наречена ngNonBindable. Нека актуализираме нашата маркировка, за да включим това:

  

4. Настройте нашия „автобус“

Методът на конструктор на Vue ни позволява да създадем основна система „шина на събития“, която ще използваме за обработка на комуникацията между двете рамки. Вътрешната функция за връзка в нашата ъглова директива, включете по-долу:

// Създайте нашия екземпляр на корен
range.vue = нов Vue ({
  el: „прост брояч“
})

В този момент трябва да видите бутона, изобразен на страницата. Щракването върху бутона увеличава стойността, както се очаква и излъчва събитието „прираст“.

И така, как да разкажем на Angular за това събитие? Чрез създаване на метод в нашия основен екземпляр Vue и извикване на този метод в персонализиран манипулатор на събитието на нашия компонент:

// Свойство на ъглов обхват
range.countValue = 0;
// Създайте нашия потребителски екземпляр
range.vue = нов Vue ({
  el: „прост брояч“,
  методи: {
    updateAngularScopeProperty: функция (стойност) {
      обхват. $ apply (function () {
        range.countValue = стойност;
      });
    }
  }
});

И в нашия html:

  <просто-брояч ng-несвързващ     V-свързват: първоначален-брояч-стойност = "0"     о-в: увеличаване = "updateAngularScopeProperty"   >   {{CountValue}}

Низовият израз '{{countValue}}' е препратка към свойството в обхвата Angular, което ще се актуализира при натискане на бутона. В този момент имаме работещ пример за това как можем да накараме Angular и Vue да си говорят един с друг. Последното нещо, което можем да направим в този пример, е да разрешим свойството началноCounterValue да се конфигурира чрез Angular:

// Свойство на ъглов обхват
range.countValue = 0;
// Създайте нашия потребителски екземпляр
range.vue = нов Vue ({
  el: „прост брояч“,
  данни: функция () {
    връщане {
      началноCounterValue: obseg.countValue
    }
  }
  методи: {
    updateAngularScopeProperty: функция (стойност) {
      обхват. $ apply (function () {
        range.countValue = стойност;
      });
    }
  }
});

и в нашия HTML:

  <просто-брояч ng-несвързващ     V-свързват: първоначален-брояч-стойност = "initialCounterValue"     о-в: увеличаване = "updateAngularScopeProperty"   >   {{CountValue}}

заключение

И с това завършва нашия урок. Научете повече за Vue и как компонентите комуникират помежду си в тяхната документация. Можете да видите този пример на plunkr. Ето една загадка, която направих по-рано.

Моля, споделете мислите си - ще ми хареса някои конструктивни отзиви :-)