Jak používat komponenty Vue 2.0 v úhlové aplikaci

Nedávno jsme byli pověřeni vývojem soupravy uživatelského rozhraní, která bude použita jako globální průvodce stylem našich produktů. Součástí tohoto procesu byl výběr rámce se schopnostmi vázat data, který bude použit při vývoji našich interaktivních widgetů. Naštěstí nalezení jednoho nebylo příliš výzvou vidět příliv možností, které musíme vybrat, konkrétně Angular, React, Knockout atd…

Dlouhou povídku jsme nakonec vyřešili s Vue kvůli svému lehkému zdroji, vysoce výkonné a brilantní dokumentaci se snadno sledovatelnými příklady. Potřebovali jsme však zajistit flexibilitu pro integraci s jinými rámci. Protože naše webové aplikace jsou postaveny v Angular, bylo prvořadé, že Vue nezpůsobila žádné zásadní překážky.

Naštěstí toto šetření přineslo požadované výsledky a já se s vámi podělím o to, jak znovu použít již implementované komponenty Vue v Angular aplikaci bez přepsání vašich komponent!

1. Popadněte zdroj a nastavte stránku

Pro tento tutoriál doporučuji otevřít jsfiddle nebo plunkr, jen začít. Začněme přidáním našich závislostí na naši stránku HTML mezi otevírací a uzavírací prvek nebo přímo za otevírací značku :

2. Připravte náš komponent k použití

Složka, kterou budeme v tomto případě používat, je příkladem mírně upraveného jednoduchého čítače z níže uvedených dokumentů:

// Zaregistrujte naši komponentu
Vue.component ('simple-counter'), {
  rekvizity: ['initialCounterValue'],
  template: '',
  data: function () {
    vrátit se {
      čítač: this.initialCounterValue
    }
  },
  metody: {
    increment: function () {
      this.counter + = 1;
      toto. $ emise ('increment', this.counter);
    }
  }
});

Tato komponenta po vytvoření instance zobrazí tlačítko HTML. Kliknutím na toto tlačítko zvýšíte číselnou hodnotu vlastnosti instance 'counter'.

Vlastnost „metody“ našich voleb součástí obsahuje mapu funkcí, na které lze odkazovat během interakcí s widgetem. Tento příklad je hostitelem funkce „inkrement“, která se spustí po kliknutí na tlačítko. Tento trigger zvyšuje hodnotu vlastnosti „counter“ a také vydává událost pomocí metody $ emit instance. Tato emitovaná událost bude poslána nahoru do instance Vue root konstruktoru, která bude zachycena a zpracována Angularem (více o tom později). Vlastnost „props“ ve konstruktoru obsahuje seznam atributů, u nichž se očekává, že budou deklarovány na naší komponentě, když budou použity v našem html, v tomto případě „initialCounterValue“:

 

3. Zavést naši úhlovou aplikaci

Připravme Angular, včetně směrnice, která bude sloužit jako bod interakce s naší komponentou:

// Zaregistrujte náš úhlový modul
angular.module ('app', [])
  .directive ('simpleCounterWrapper', function () {
    vrátit se {
      omezit: 'A',
      link: function (obor, $ element) {
        // Zde jde logika interakce komponent Vue
      }
    }
  });
// Spusťte aplikaci pomocí našeho vytvořeného modulu
angular.bootstrap (document.body, ['app']);

Náš HTML bude vypadat takto:

  

Jedna věc, na kterou je třeba dát pozor, je Angular se pokouší sestavit jakýkoli prvek, který vypadá jako vlastní směrnice, v našem případě jednoduchý čítač. Aby tomu zabránili Angular, poskytují směrnici nazvanou ngNonBindable. Aktualizujme naše označení tak, aby zahrnovalo toto:

  

4. Nastavte náš „autobus“

Metoda konstruktoru společnosti Vue nám umožňuje vytvořit základní systém „sběrnice událostí“, který použijeme ke zpracování komunikace mezi oběma rámci. Mezi funkci propojení v naší úhlové směrnici patří následující:

// Vytvořte naši kořenovou instanci
obor.vue = nový Vue ({
  el: 'simple-counter'
})

Nyní byste měli vidět tlačítko vykreslené na stránce. Kliknutím na tlačítko se hodnota zvyšuje podle očekávání a vysílá se událost „increment“.

Jak tedy řekneme Angularovi o této události? Vytvořením metody v naší kořenové instanci Vue a vyvoláním této metody v obslužné rutině události „přírůstek“ naší komponenty:

// Vlastnost úhlového rozsahu
range.countValue = 0;
// Vytvořte naši kořenovou instanci
obor.vue = nový Vue ({
  el: 'simple-counter',
  metody: {
    updateAngularScopeProperty: function (value) {
      rozsah. $ apply (function () {
        range.countValue = hodnota;
      });
    }
  }
});

A v našem html:

     {{countValue}}

Řetězcový výraz „{{countValue}}“ je odkaz na vlastnost v úhlovém rozsahu, která bude aktualizována po kliknutí na tlačítko. V tomto okamžiku máme pracovní příklad, jak můžeme přimět Angular a Vue, aby spolu mluvili. Poslední věcí, kterou můžeme v tomto příkladu udělat, je umožnit konfiguraci vlastnosti initialCounterValue pomocí Angular:

// Vlastnost úhlového rozsahu
range.countValue = 0;
// Vytvořte naši kořenovou instanci
obor.vue = nový Vue ({
  el: 'simple-counter',
  data: function () {
    vrátit se {
      initialCounterValue: range.countValue
    }
  },
  metody: {
    updateAngularScopeProperty: function (value) {
      rozsah. $ apply (function () {
        range.countValue = hodnota;
      });
    }
  }
});

a v našem HTML:

     {{countValue}}

Závěr

A to uzavírá náš tutoriál. Další informace o Vue a o tom, jak komponenty spolu vzájemně komunikují, naleznete v jejich dokumentaci. Tento příklad si můžete prohlédnout na plunkr. Tady je housle, kterou jsem udělal dříve.

Prosím, podělte se o své myšlenky - rád bych konstruktivní zpětnou vazbu :-)