Med hjälp av Event Buss för att Dela Rekvisita Mellan Vue Komponenter

0
27

Som standard, kommunikation mellan Vue komponenter sker med hjälp av rekvisita. Rekvisita är egenskaper som går i arv från en förälder komponent för att ett barn komponent. Här är till exempel en komponent, där titeln är en prop:

<blogg-inlägg title=”Min resa med Vue”></blogg-inlägget>

Rekvisita är alltid vidare från förälder komponent till barn komponent. När din ansökan ökar i komplexitet, du sakta slå vad kallas prop borrning här är en avser artikel som Reagerar-fokuserade, men helt tillkommer). Prop borrning är idén passerar rekvisita ner och ner och ner för att barn komponenter — och som ni kan föreställa er, är det i allmänhet en mödosam process.

Så, tråkiga prop borrning kan vara ett potentiellt problem i ett komplex. Den andra har att göra med kommunikation mellan orelaterade komponenter. Vi kan ta itu med allt detta genom att använda sig av en Händelse Buss.

Vad är ett Event Buss? Tja, det är typ av summeras i själva namnet. Det är en form av transport för en komponent för att klara rekvisita från en komponent till en annan, oavsett om dessa komponenter är placerade i träd.

Praxis uppgift: att Bygga en räknare

Låt oss bygga något tillsammans för att visa att konceptet av en händelse buss. En räknare som adderar eller subtraherar ett inlämnat värde och stämmer den totala är en bra plats att börja på:

Se Pennan Vuejs Händelse Buss Motverka genom att Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Att använda sig av en händelse buss, först måste vi initiera den så här:

importera Vue från ‘vue’;
const eventBus = new Vue();

Detta skapar en instans av Vue att eventBus. Du kan kalla den vad du vill, alls. Om du gör användningen av en enda fil komponent, då bör du ha snutt i en separat fil, eftersom du kommer att exportera Vue exempel tilldelas eventBus i alla fall:

importera Vue från ‘vue’;
export const eventBus = new Vue();

Med det gjort, kan vi börja att använda det i vår counter komponent.

Här är vad vi vill göra:

  • Vi vill ha en räkna med en inledande värdet 0.
  • Vi vill ha ett fält som accepterar numeriska värden.
  • Vi vill ha två knappar: en som kommer att lägga fram numeriskt värde för att räkna när du klickar på och andra att subtrahera att lämnas numeriskt värde från räkningen när den klickas.
  • Vi vill ha en bekräftelse på vad som hände när räkningen förändringar.

Detta är hur mallen ser ut med var och en av dessa delar på plats:

<div id=”app”>
<h2>Motverka</h2>
<h2>{{ count }}</h2>
<input type=”number” v-modellen=”” / >
<div class=”div__knappar”>
<knappen class=”incrementButton” @klicka på.förhindra=”handleIncrement”>
Steg
</button>
<knappen class=”decrementButton” @klicka på.förhindra=”handleDecrement”>
Minska
</button>
</div>
<p>{{ text }}</p>
</div>

Vi binder inmatningsfältet till ett värde som kallas entry, som vi ska använda för att antingen öka eller minska antalet, beroende på vad som har angetts av användaren. När du klickat på knappen, vi utlösa en metod som bör antingen öka eller minska värdet för count. Slutligen, att {{ text }} sak som finns i <p> – taggen är det budskap som vi ska skriva ut som sammanfattar den förändring räknas.

Här är hur det kommer alla tillsammans i vårt script:

nya Vue({
el: ‘#app”,
data() {
return {
antal: 0,
sms: a: “,
inlägg: 0
}
},
skapat() {
eventBus.$på (“räkna-ökas’, () => {
detta.sms: a = `Räkna höjdes`
setTimeout(() => {
detta.text = “;
}, 3000);
})
eventBus.$på (“räkna-minskar’, () => {
detta.sms: a = `Räkna minskade`
setTimeout(() => {
detta.text = “;
}, 3000);
})
},
metoder: {
handleIncrement() {
detta.count += parseInt(det här.inlägg, 10);
eventBus.$släpper ut (“räkna-ökas’)
detta.inlägg = 0;
},
handleDecrement() {
detta.räkna= parseInt(det här.inlägg, 10);
eventBus.$släpper ut (“räkna-minska’)
detta.inlägg = 0;
}
}
})

Du kanske har märkt att vi är på väg att hoppa på den händelse buss genom att titta på koden.

Första vi har att göra är att fastställa en väg för att skicka en händelse från en komponent till en annan. Vi kan bana väg att använda eventBus.$släpper ut() (med emit är ett finare ord för att skicka ut). Att skicka ingår i två metoder, handleIncrement och handleDecrement, som lyssnar, för den ingående inlagor. Och, när de inträffar, vårt event buss tävlingar att någon komponent för att begära data och skickar den rekvisita över.

Du kanske har märkt att vi lyssnar för att båda händelserna i skapats() lifecycle krok med eventBus.$på(). I båda händelserna, vi måste passera i strängen som motsvarar den händelse att vi skulle ut. Det är som en identifierare för viss händelse och det som är etablerade ett sätt för en del att ta emot data. När eventBus erkänner en särskild händelse som har meddelat, den funktion som följer kallas — och vi ange en text för att visa vad som hade hänt, och gör det det försvinner efter tre sekunder.

Praxis uppgift: Hantering av flera komponenter

Låt oss säga att vi arbetar på en profil sida där användare kan uppdatera sina namn och e-postadress för en app och sedan se uppdateringen utan att uppdatera sidan. Detta kan uppnås smidigt att använda händelse buss, även om vi har att göra med två komponenter denna tid: den användarens profil och form som lämnar profil förändringar.

Se Pennan Vuejs Händelse Buss 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Här är mallen:

<div class=”container”>
<div id=”profile”>
<h2>Profil</h2>
<div>
<p>Namn: {{name}}</p>
<p>E: {{ mail }}</p>
</div>
</div>

<div id=”redigera__profil”>
<h2>fyll i dina uppgifter nedan:</h2>
<formen @lämna in.förhindra=”handleSubmit”>
<div class=”form-field”>
<etikett> > Namn:</label>
<input type=”text” – v-modell=”användare.namn” />
</div>
<div class=”form-field”>
<etikett> > Mail:</label>
<input type=”text” – v-modell=”användare.e-post” />
</div>
<knappen>Skicka</button>
</form>
</div>
</div>

Vi kommer att passera id (användarnamn.namn och användare.e-post)till motsvarande komponent. Första, låt oss ställa upp mallen för att Redigera Profil (redigera__profil) del, som innehåller namnet och e-post uppgifter som vi vill förmedla till Profil komponent ska vi ställa upp nästa. Igen, vi har etablerat en händelse buss ut att data efter den upptäcker att en inlämning händelse har ägt rum.

nya Vue({
el: “#redigera__profil”,
data() {
return {
user: {
namn: “,
e-post:”
}
}
},
metoder: {
handleSubmit() {
eventHub.$släpper ut (“form-fram”.användaren)
detta.user = {}
}
}
})

Dessa uppgifter kommer att användas för att reaktivt uppdatera profil på användaren i Profile (profil) del, som letar efter namn och e-post för att komma i när bussen anländer till dess nav.

nya Vue({
el: ‘#profil’,
data() {
return {
namn: “,
e-post:”
}
},
skapat() {
eventHub.$på (“form-in’, ({ namn, e-post}) => {
detta.namn = namn;
detta.e = e-post
})
}
})

Deras väskor är packade. Nu är allt de behöver göra är att gå hem.

Ganska cool, eller hur? Trots att Redigera Profil Profil och komponenter som är relaterade eller inte i en direkt förälder-barn-relation) — är det möjligt för dem att kommunicera med varandra, förenade genom samma händelse.

Rollin’ höger längs

Jag har hittat Händelse Buss till hjälp i de fall där jag vill aktivera reaktivitet i min app — specifikt, för att uppdatera en del baserad på de svar som erhölls från servern utan att orsaka sidan för att uppdatera. Det är också möjligt att den händelse som får avges kan bli lyssnade på med mer än en komponent.

Om du har andra intressanta scenarier för att använda händelse bussen, jag kommer att älska att höra om dem i kommentarerna. 🚌