Met behulp van Event Bus te Delen Rekwisieten Tussen Vue Onderdelen

0
37

Standaard is de communicatie tussen de Vue onderdelen gebeuren met het gebruik van rekwisieten. Attributen zijn eigenschappen die worden doorgegeven van ouder-onderdeel aan een kind component. Bijvoorbeeld, hier is een onderdeel waar de titel is een prop:

<blog-post title=”Mijn reis met Vue”></blog-post>

Rekwisieten worden altijd doorgegeven van ouder-component om het kind component. Als uw aanvraag toeneemt in complexiteit, je langzaam te raken wat heet prop boren hier een gerelateerd artikel te Reageren-gericht, maar helemaal van toepassing). Prop het boren is het idee van het passeren van rekwisieten omlaag en omlaag en omlaag om de onderliggende componenten, zoals je zou denken, het is over het algemeen een moeizaam proces.

Zo, vervelend prop boren kan een potentieel probleem in een complex. Het andere heeft te maken met de communicatie tussen niet-verwante onderdelen. We kunnen pakken, dit alles door gebruik te maken van een Evenement Bus.

Wat is een Evenement Bus? Goed, het is een soort samengevat in de naam zelf. Het is een modus van vervoer voor een component te geven rekwisieten van het ene onderdeel naar het andere, ongeacht de locatie waar deze componenten bevinden zich in de boom.

De praktijk taak: het Bouwen van een teller

We bouwen samen iets te tonen van het concept van een evenement bus. Een teller die opgeteld of afgetrokken een opgegeven waarde en strookt het totaal is een goede plek om te beginnen:

Zie de Pen Vuejs Evenement Bus Teller door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Om gebruik te maken van een gebeurtenis bus, moeten we eerst te initialiseren:

importeren Vue van ‘vue’;
const eventBus = nieuwe Vue();

Dit stelt een exemplaar van de Vue te eventBus. Je kunt het elke naam geven die u wilt, ook. Als u gebruik maakt van een single-file component, moet u het fragment in een apart bestand, omdat je zal moeten de export van de Vue instantie toegewezen aan eventBus toch:

importeren Vue van ‘vue’;
export const eventBus = nieuwe Vue();

Met dat gedaan, kunnen we beginnen met het maken van gebruik van it in onze teller component.

Hier is wat we willen doen:

  • Willen We een graaf met een initiële waarde van 0.
  • We willen een invoerveld waarin u numerieke waarden.
  • We willen twee knoppen: één die de ingediende numerieke waarde aan de graaf wanneer erop wordt geklikt en de andere af te trekken dat de ingediende numerieke waarde van de graaf wanneer erop wordt geklikt.
  • We willen een bevestiging van wat er gebeurde toen de graaf van wijzigingen.

Dit is hoe de mal eruit ziet met elk van die elementen in de plaats:

<div id=”app”>
<h2>Teller</h2>
<h2>{{ count }}</h2>
<input type=”number”, v-model=”entry” />
<div class=”div__knoppen”>
<button class=”incrementButton” @klik.voorkomen=”handleIncrement”>
Toename
</button>
<button class=”decrementButton” @klik.voorkomen=”handleDecrement”>
Verlagen
</button>
</div>
<p>{{ tekst }}</p>
</div>

We binden de input-veld een waarde genoemd vermelding, die we gebruiken om meer of minder te tellen, afhankelijk van wat is ingevoerd door de gebruiker. Wanneer een knop wordt geklikt, wij leiden tot een methode die moet verhogen of verlagen de waarde van de graaf. Ten slotte, die {{ tekst }} ding opgenomen in de <p> tag is de boodschap die we printen met een overzicht van de verandering van de graaf.

Hier is hoe dat komt allemaal samen in ons script:

nieuwe Vue({
el: ‘#app’,
gegevens() {
terug {
count: 0,
tekst: “,
vermelding: 0
}
},
aangemaakt() {
eventBus.$op(‘count-verhoogd’, () => {
deze.tekst = `Aantal was toegenomen`
setTimeout(() => {
deze.text = “;
}, 3000);
})
eventBus.$op(‘count-verlaagd’, () => {
deze.tekst = `Aantal was gedaald`
setTimeout(() => {
deze.text = “;
}, 3000);
})
},
methoden: {
handleIncrement() {
deze.teller += parseInt(deze.item, 10);
eventBus.$stoten(‘count-verhoogd’)
deze.entry = 0;
},
handleDecrement() {
deze.graaf -= parseInt(deze.item, 10);
eventBus.$stoten(‘count-verlaagd’)
deze.entry = 0;
}
}
})

Je hebt misschien gemerkt dat we klaar zijn om hop op de gebeurtenis bus door te kijken naar de code.

Eerste wat we moeten doen is het opzetten van een pad voor het verzenden van een gebeurtenis van het ene onderdeel naar het andere. We effenen het pad met behulp van eventBus.$stoten() (met stralen wordt een duur woord voor het verzenden). Dat het verzenden is opgenomen in twee methoden, handleIncrement en handleDecrement, die luisteren naar de input van de inzendingen. En, als ze eenmaal gebeuren, ons evenement bus races op elk onderdeel opvragen van gegevens en stuurt de rekwisieten over.

Je hebt misschien gemerkt dat we zijn het luisteren voor zowel gebeurtenissen in de() levenscyclus van de haak met behulp van eventBus.$aan(). Op beide evenementen, we hebben nu in de tekenreeks die overeenkomt met de gebeurtenis die wij uitgezonden. Dit is zoals een id voor het specifieke geval en de zaak, die een manier voor een onderdeel om gegevens te ontvangen. Wanneer eventBus erkent dat een bepaalde gebeurtenis die is aangekondigd, is de functie die volgt heet, en we stellen een tekst om weer te geven wat er was gebeurd, en het verdwijnen na drie seconden.

De praktijk taak: het beheren van meerdere componenten

Laten we zeggen dat we werken op een profiel pagina waar gebruikers kunnen de update van hun naam en email adres in voor een app en dan zie je de update zonder de pagina te vernieuwen. Dit kan worden bereikt soepel met behulp van event-bus, ook al hebben we te maken met twee onderdelen van deze tijd: het gebruikersprofiel en het formulier verzendt profiel.

Zie de Pen Vuejs Evenement Bus 2 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

Hier is het sjabloon:

<div class=”container”>
<div id=”profiel”>
<h2>Profiel</h2>
<div>
<p>Naam: {{naam}}</p>
<p>e-Mail: {{ email }}</p>
</div>
</div>

<div id=”bewerken__profiel”>
<h2>Vul hieronder uw gegevens in:</h2>
<form @indienen.voorkomen=”handleSubmit”>
<div class=”form-field”>
<label>Naam:</label>
<input type=”text” v-model=”gebruiker.naam” />
</div>
<div class=”form-field”>
<label>Email:</label>
<input type=”text” v-model=”gebruiker.e-mail” />
</div>
<toets>Verzenden</button>
</form>
</div>
</div>

We passeren de id ‘ s (gebruiker.naam van de gebruiker.e-mail)om het desbetreffende onderdeel. Laten we eerst de set-up van de sjabloon voor het Profiel Bewerken (edit__profiel) component, waarin de naam en e-mail gegevens die we willen doorgeven aan het Profiel component stellen we volgende. Nogmaals, we hebben vastgesteld dat een gebeurtenis bus uit te stralen dat de gegevens na het detecteert dat een inzending gebeurtenis heeft plaatsgevonden.

nieuwe Vue({
el: “#edit – __profiel”,
gegevens() {
terug {
gebruiker: {
naam: “,
e-mail:”
}
}
},
methoden: {
handleSubmit() {
eventHub.$stoten(‘formulier-ingediend’, dit.gebruiker)
deze.gebruiker = {}
}
}
})

Deze gegevens zullen worden gebruikt om reactief update van het profiel op de gebruiker in het Profiel (profiel) component, die op zoek naar naam en e-mail in te komen wanneer de bus arriveert om de hub.

nieuwe Vue({
el: ‘#profiel’,
gegevens() {
terug {
naam: “,
e-mail:”
}
},
aangemaakt() {
eventHub.$op(‘formulier-ingediend’, ({ naam, e-mail}) => {
deze.naam = naam;
deze.e-mail = e-mail
})
}
})

Hun zakken worden verpakt. Nu alles wat ze hoeft te doen is naar huis gaan.

Pretty cool, toch? Hoewel het Bewerken van het Profiel en het Profiel onderdelen zijn los van — of niet in een directe ouder-kind relatie) — is het voor hen mogelijk om te communiceren met elkaar, verbonden door dezelfde gebeurtenis.

Rollin’ rechts langs

Ik vond de Gebeurtenis Bus nuttig zijn in gevallen waar ik wil inschakelen reactiviteit in mijn app — met name voor de update van een component, gebaseerd op de respons verkregen van de server, zonder dat de pagina te vernieuwen. Het is ook mogelijk dat de gebeurtenis die wordt uitgestoten kan worden beluisterd door meer dan één component.

Als u andere interessante scenario ‘ s van het gebruik van gebeurtenis-bus, zal ik graag van je horen wat ze in de comments. 🚌