Sådan bruges Vue 2.0-komponenter i en vinkelapplikation

Vi fik for nylig til opgave at udvikle et UI-kit, der skal bruges som en global stilguide på tværs af vores produkter. En del af denne proces involverede valg af en ramme med databindende evner, der skal bruges i udviklingen af ​​vores interaktive widgets. Heldigvis var det ikke en stor udfordring at finde en sådan, at se tilstrømningen af ​​muligheder, vi har at vælge imellem, nemlig Angular, React, Knockout osv ...

Lang historie kort, som vi til sidst afsluttede med Vue på grund af dens lette kilde, høj ydelse og strålende dokumentation med let at følge eksempler. Hvad vi imidlertid havde brug for for at sikre, var fleksibiliteten til at integrere med andre rammer. Da vores webapplikationer er bygget i Angular, var det vigtigt, at Vue ikke forårsagede større tilbageslag.

Heldigvis gav denne undersøgelse ønskede resultater, og jeg vil dele med dig, hvordan du genbruger allerede implementerede Vue-komponenter i en Angular-app uden at omskrive dine komponenter!

1. Grib kilden, og indstil din side

Til denne tutorial anbefaler jeg at åbne jsfiddle eller plunkr, bare for at komme i gang. Lad os starte med at tilføje vores afhængigheder til vores HTML-side mellem åbning og lukning af -elementet eller direkte efter åbningen -taggen:

2. Forbered vores komponent til brug

Komponenten, vi vil bruge i dette tilfælde, er et letjusteret simpeltællereksempel fra dokumenterne nedenfor:

// Registrer vores komponent
Vue.component ('simple-counter', {
  rekvisitter: ['initialCounterValue'],
  skabelon: ' {{counter}} ',
  data: funktion () {
    Vend tilbage {
      tæller: this.initialCounterValue
    }
  },
  metoder: {
    inkrement: funktion () {
      this.counter + = 1;
      dette. $ emit ('inkrement', this.counter);
    }
  }
});

Denne komponent, når den er instantiseret, gengiver en HTML-knap. Hvis du klikker på denne knap, øges den numeriske værdi af 'tæller' -forekomstsejendom.

Egenskaben "metoder" i vores komponentindstillinger indeholder et kort over funktioner, der kan henvises til under interaktion med widget'en. Dette eksempel er vært for en "inkrement" -funktion, der udløses, når der klikkes på knappen. Denne trigger øger egenskabsværdien 'tæller' og udsender også en hændelse via dens $ emit-forekomstmetode. Denne udsendte begivenhed sendes opad til en Vue-rodkonstruktørforekomst, der skal fanges og håndteres af Angular (mere om dette senere). Egenskaben "rekvisitter" på konstruktøren indeholder en liste over attributter, der forventes at blive erklæret på vores komponent, når de bruges i vores html, i dette tilfælde 'initialCounterValue':

 

3. Bootstrap vores vinkel applikation

Lad os forberede vinkel, herunder et direktiv, der vil fungere som interaktionspunktet med vores komponent:

// Registrer vores vinkelmodul
angular.module ('app', [])
  .directive ('simpleCounterWrapper', funktion () {
    Vend tilbage {
      begrænse: 'A',
      link: funktion (omfang, $ element) {
        // Vue-komponent-interaktionslogik findes her
      }
    }
  });
// Start vores applikation med vores oprettede modul
angular.bootstrap (document.body, ['app']);

Vores HTML vil se sådan ud:

  

En ting man skal passe på er vinkelformat forsøg på at samle ethvert element, der ligner et tilpasset direktiv, i vores tilfælde simple counter. For at forhindre, at Angular gør dette, giver de et direktiv kaldet ngNonBindable. Lad os opdatere vores markering for at inkludere dette:

  

4. Indstil vores 'bus'

Vues konstruktormetode giver os mulighed for at oprette et grundlæggende 'event bus' system, som vi vil bruge til at håndtere kommunikation mellem begge rammer. Inde i linkfunktionen i vores vinkeldirektiv inkluderer følgende:

// Opret vores rodforekomst
scope.vue = ny Vue ({
  el: 'simple-counter'
})

På dette tidspunkt skal du se knappen gengivet på siden. Ved at klikke på knappen øges værdien som forventet og udsender hændelsen 'inkrement'.

Så hvordan fortæller vi Angular om denne begivenhed? Ved at oprette en metode i vores root Vue-forekomst og kalde denne metode på vores komponents "inkrement" tilpassede begivenhedshåndterer:

// Vinkelformet rækkevidde
scope.countValue = 0;
// Opret vores rodforekomst
scope.vue = ny Vue ({
  el: 'simple-counter',
  metoder: {
    updateAngularScopeProperty: funktion (værdi) {
      omfang. $ Apply (funktion () {
        scope.countValue = værdi;
      });
    }
  }
});

Og i vores html:

     {{CountValue}}

Strengeudtrykket '{{countValue}}' er en henvisning til egenskaben i vinkelområdet, der opdateres, når der klikkes på knappen. På dette tidspunkt har vi et fungerende eksempel på, hvordan vi kan få Angular og Vue til at tale med hinanden. Den sidste ting, vi kan gøre i dette eksempel, er at tillade, at egenskaben initialCounterValue kan konfigureres via Angular:

// Vinkelformet rækkevidde
scope.countValue = 0;
// Opret vores rodforekomst
scope.vue = ny Vue ({
  el: 'simple-counter',
  data: funktion () {
    Vend tilbage {
      initialCounterValue: scope.countValue
    }
  },
  metoder: {
    updateAngularScopeProperty: funktion (værdi) {
      omfang. $ Apply (funktion () {
        scope.countValue = værdi;
      });
    }
  }
});

og i vores HTML:

     {{CountValue}}

Konklusion

Og dette afslutter vores tutorial. Lær mere om Vue, og hvordan komponenter kommunikerer med hinanden i deres dokumentation. Du kan se dette eksempel på plunkr. Her er en fele, jeg lavede tidligere.

Del venligst dine tanker - Jeg ville elske nogle konstruktive feedback :-)