Ved hjelp av Hendelsen Buss for å Dele Rekvisitter Mellom Vue Komponenter

0
15

Standard kommunikasjon mellom Vue komponenter skje med bruk av rekvisitter. Rekvisitter er egenskaper som er gått fra en forelder komponent til et barn komponent. For eksempel, her er en komponent hvor tittelen er en rekvisitt:

<blogg-innlegg title=”Min reise med Vue”></blogg-innlegg>

Rekvisitter er alltid gått fra den overordnede komponent til barnet komponent. Som din søknad øker i kompleksitet, du sakte treffe det som er kalt prop boring her er en relatert artikkel som er Reagere-fokusert, men helt gjelde). Prop boring er ideen om bestått rekvisitter ned og ned og ned til barnet komponenter — og, som du kan forestille deg, er det generelt en langtekkelig prosess.

Så kjedelig prop boring kan være et potensielt problem i et kompleks. Det andre har å gjøre med kommunikasjon mellom ubeslektede komponenter. Vi kan takle alt dette, ved å gjøre bruk av en Hendelse Buss.

Hva er en Hendelse Buss? Vel, det er en slags summert opp i navnet i seg selv. Det er en modus for transport for én komponent til å passere rekvisitter fra én komponent til en annen, uansett hvor disse komponentene er plassert i treet.

Praksisen oppgave: å Bygge en teller

La oss bygge noe sammen for å demonstrere konseptet av en hendelse buss. En teller som legger til eller trekker et innsendt verdi og stemmer den totale sum er et godt sted å starte:

Se Penn Vuejs Event Buss Counter av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Å gjøre bruk av en hendelse buss, må vi først må du initialisere det som så:

import Vue fra ‘vue’;
const eventBus = new Vue();

Dette setter en forekomst av Vue å eventBus. Du kan kalle det hva du vil, hva som helst. Hvis du gjør bruk av en enkelt fil, komponent, bør du har kodebiten i en egen fil, siden du er nødt til å eksportere Vue eksempel er tilordnet til eventBus likevel:

import Vue fra ‘vue’;
eksport const eventBus = new Vue();

Med at dette er gjort, kan vi begynne å gjøre bruk av den i vårt arbeid mot komponent.

Her er hva vi ønsker å gjøre:

  • Vi ønsker å ha en teller med en initial verdi på 0.
  • Vi ønsker en input-feltet som aksepterer numeriske verdier.
  • Vi vil ha to knapper: en som vil legge sendt inn numerisk verdi for å telle når du klikket på, og den andre til å trekke fra som har levert numerisk verdi fra teller når den klikkes.
  • Vi ønsker en bekreftelse av hva som skjedde når count endringer.

Dette er hvordan malen ser med hver av de elementer på plass:

<div id=”app”>
<h2>Counter</h2>
<h2>{{ count }}</h2>
<input type=”antall” v-modell=”entry” />
<div class=”div – __ – knappene”>
<- knappen class=”incrementButton” @klikk.forhindre=”handleIncrement”>
Økning
</button>
<- knappen class=”decrementButton” @klikk.forhindre=”handleDecrement”>
Minsk
</button>
</div>
<p>{{ tekst }}</p>
</div>

Vi binder input-feltet til en verdi kalt inn, noe som vi vil bruke til å enten øke eller redusere antall, avhengig av hva som er angitt av brukeren. Når knappen klikkes, vil vi utløse en metode som bør enten øke eller redusere verdien av teller. Til slutt, som {{ tekst }} ting som finnes i <p> – tag-er budskapet vi vil skrive ut som oppsummerer endringen til greven.

Her er hvordan det hele kommer sammen i skriptet:

nye Vue({
el: ‘#app’,
data() {
tilbake {
teller: 0,
tekst: “,
oppføring: 0
}
},
opprettet() {
eventBus.$på(‘teller-økt’, () => {
dette.tekst = `Teller økte`
setTimeout(() => {
dette.tekst = “;
}, 3000);
})
eventBus.$på(‘teller-decremented’, () => {
dette.tekst = `Telling ble redusert`
setTimeout(() => {
dette.tekst = “;
}, 3000);
})
},
metoder: {
handleIncrement() {
dette.teller += parseInt(denne.oppføring, 10);
eventBus.$emit(‘teller-økt’)
dette.oppføring = 0;
},
handleDecrement() {
dette.telle -= parseInt(denne.oppføring, 10);
eventBus.$emit(‘teller-decremented’)
dette.oppføring = 0;
}
}
})

Du har kanskje lagt merke til at vi er i ferd med å hoppe på arrangementet buss ved å se på at koden.

Det første vi må gjøre er å opprette en bane for å sende en hendelse fra en komponent til en annen. Vi kan legge til at bane ved hjelp av eventBus.$emit() (med avgir være et fancy ord for å sende ut). At sendingen er inkludert i to metoder, handleIncrement og handleDecrement, som lytter til innspill bidrag. Og når de skjer, våre arrangement buss løp til enhver komponent som ber om data og sender rekvisitter over.

Du har kanskje lagt merke til at vi lytter for både hendelser i laget() lifecycle kroken ved hjelp av eventBus.$på(). I begge hendelsene, har vi å passere i strengen som tilsvarer tilfelle vi slippes ut. Dette er som en identifikator for den aktuelle hendelsen, og de ting som er etablert en måte for en komponent for å motta data. Når eventBus gjenkjenner en bestemt hendelse som har blitt annonsert, en funksjon som følger kalles — og vi satt en tekst for å vise hva som hadde skjedd, og gjøre det til det forsvinner etter tre sekunder.

Praksisen oppgave: Håndtering av flere komponenter

La oss si at vi arbeider på en profil side der brukerne kan oppdatere deres navn og e-postadresse for en app og deretter se oppdateringen uten å oppdatere siden. Dette kan oppnås jevnt ved hjelp av hendelsen buss, selv om vi har å gjøre med to komponenter denne gangen: brukeren profil og form som hevder profil endringer.

Se Penn Vuejs Event Buss 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Her er malen:

<div class=”beholder”>
<div id=”profil”>
<h2>Profil</h2>
<div>
<p>Navn: {{navn}}</p>
<p>E-post: {{ e }}</p>
</div>
</div>

<div id=”rediger__profil”>
<h2>skriv Inn dine detaljer nedenfor:</h2>
<form @submit (send).forhindre=”handleSubmit”>
<div class=”form-feltet”>
<label>Navn:</label>
<input type=”text” v-modell=”brukeren.navnet” />
</div>
<div class=”form-feltet”>
<label>E-post:</label>
<input type=”text” v-modell=”brukeren.e-postadresse” />
</div>
<- knappen>Send</button>
</form>
</div>
</div>

Vi vil passere id (brukeren.navn og bruker.e)til den tilsvarende komponenten. Først, la oss sette opp en mal for Rediger Profil (rediger – __ – profil), komponent, som har navn og e-post data vi ønsker å gå til Profil komponent vil vi sette opp neste. Igjen, vi har etablert en hendelse buss til avgir at data etter den oppdager at en innlevering hendelsen har funnet sted.

nye Vue({
el: “#redigere__profil”,
data() {
tilbake {
bruker: {
navn: “,
e-post:”
}
}
},
metoder: {
handleSubmit() {
eventHub.$sender ut (“form-levert”, dette.bruker)
dette.user = {}
}
}
})

Disse dataene vil bli brukt til å reactively oppdatere profilen på brukeren i Profile (profil) komponent, som leter du etter navn og e-post for å komme i når bussen kommer til sin hub.

nye Vue({
el: ‘#profil’,
data() {
tilbake {
navn: “,
e-post:”
}
},
opprettet() {
eventHub.$på (“form-levert”, ({ navn, e-post}) => {
dette.navn = navn;
dette.e = e-post
})
}
})

Deres poser er pakket. Nå er alt de har å gjøre er å gå hjem.

Ganske kult, ikke sant? Selv om Rediger Profil og Profil komponenter som ikke er relatert — eller ikke i en direkte foreldre-barn-forhold) — det er mulig for dem å kommunisere med hverandre, er knyttet sammen av den samme hendelsen.

Rollin’ rett sammen

Jeg har funnet Event Buss nyttig i de tilfeller hvor jeg ønsker å aktivere funksjonen i appen min, spesielt hvis du vil oppdatere en komponent basert på svar innhentet fra serveren uten å forårsake siden for å oppdatere. Det er også mulig at den hendelsen som får slippes ut kan bli lyttet til av flere enn én komponent.

Hvis du har andre interessante scenarier for å bruke event buss, vil jeg gjerne høre om dem i kommentarfeltet. 🚌