Mit Hilfe von Event-Bus zu Teilen, Requisiten Zwischen Vue Komponenten

0
34

Standardmäßig ist die Kommunikation zwischen Vue Komponenten geschehen, die mit der Nutzung von Requisiten. Requisiten sind Eigenschaften, die weitergegeben werden von einer übergeordneten Komponente eine untergeordnete Komponente. Zum Beispiel, hier ist eine Komponente, wo Titel ist ein prop:

<blog-post-Titel=”Meine Reise mit Vue”></blog-post>

Requisiten sind immer vergangen, von der übergeordneten Komponente eine untergeordnete Komponente. Wie Ihre Anwendung erhöht die Komplexität, Sie langsam schlagen, was heißt, prop-Bohrung hier ist ein Artikel beziehen, Reagieren-konzentriert, aber ganz gilt). Prop-Bohrung ist die Idee der übergabe der Requisiten nach unten zum untergeordneten Komponenten — und, wie Sie sich vorstellen können, es ist in der Regel ein langwieriger Prozess.

Also, langweilig prop-Bohrung kann ein potentielles problem in einem Komplex. Der andere hat zu tun mit der Kommunikation zwischen unabhängigen Komponenten. Wir bewältigen können all dies durch die Nutzung eines Event-Bus.

Was ist ein Event-Bus? Gut, es ist eine Art, zusammengefasst unter dem Namen selbst. Es ist ein Verkehrsmittel für eine Komponente zu übergeben Requisiten von einer Komponente zur anderen, egal, wo sich diese Komponenten befinden sich in den Baum.

Praxis-Aufgabe: Aufbau einer Zähler

Lasst uns etwas bauen, gemeinsam zu demonstrieren, das Konzept eines event-bus. Ein Zähler addiert bzw. subtrahiert einen übermittelten Wert und deckt die gesamte Summe ist ein guter Ort, um zu starten:

Finden Sie den Stift Vuejs Event-Bus Zähler von Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Nutzen Sie eine event-bus, müssen wir zuerst zu initialisieren, etwa so:

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

Diese legt eine Instanz der Vue zu eventBus. Man kann es nennen, was Sie möchten, zu löschen. Wenn Sie die Nutzung von single-file-Komponente, dann sollten Sie snippet in eine eigene Datei, da Sie zum exportieren der Vue-Instanz zugeordnet eventBus sowieso:

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

Damit fertig, wir können beginnen, it-Einsatz in der Zähler-Komponente.

Hier ist, was wir tun wollen:

  • Wir wollen einen Zähler mit einem Startwert von 0.
  • Wir wollen ein Eingabefeld akzeptiert numerische Werte.
  • Wir wollen zwei Schaltflächen: eine Schaltfläche hinzufügen wird die eingereichten numerischen Wert der Zählung, wenn Sie geklickt werden und die anderen zu subtrahieren, die eingereicht numerischer Wert aus der Zählung, wenn geklickt wird.
  • Wir möchten eine Bestätigung von dem, was passiert, wenn sich die Anzahl ändert.

Dies ist, wie die Vorlage aussieht, in jedem dieser Elemente:

<div id=”app”>
<h2>Counter</h2>
<h2>{{ count }}</h2>
<input type=”number” v Modell=”Eintrag” />
<div class=”div – __ – buttons”>
<button class=”incrementButton” @klicken.verhindern=”handleIncrement”>
Inkrement
</button>
<button class=”decrementButton” @klicken.verhindern=”handleDecrement”>
Dekrement
</button>
</div>
<p>{{ text }}</p>
</div>

Wir binden Sie das Eingabefeld, um einen Wert namens-Eintrag, die wir verwenden werden, um entweder erhöhen oder verringern Sie die Anzahl, je nachdem, was vom Benutzer eingegeben werden. Wenn eine Schaltfläche geklickt wird, wir lösen eine Methode, die entweder erhöhen oder verringern Sie den Wert von count. Schließlich, dass {{ text }} Sache, die enthalten ist in <p> – tag ist die Botschaft, die wir drucken, fasst die änderung der Zählung.

Hier ist, wie das alles kommt zusammen in unserem Skript:

neue Vue({
el: ‘#app’,
Daten() {
return {
Anzahl: 0,
text: “,
Eintrag: 0
}
},
erstellt() {
eventBus.$auf(‘count-inkrementiert’, () => {
diese.text = `die Anzahl wurde erhöht”
setTimeout(() => {
diese.text = “;
}, 3000);
})
eventBus.$auf(‘count dekrementiert’, () => {
diese.text = `Count gesenkt wurde,`
setTimeout(() => {
diese.text = “;
}, 3000);
})
},
Methoden: {
handleIncrement() {
diese.count += parseInt(this.Eintrag, 10);
eventBus.$emit(‘count-increment’)
diese.Eintrag = 0;
},
handleDecrement() {
diese.count -= parseInt(this.Eintrag, 10);
eventBus.$emit(‘count dekrementiert’)
diese.Eintrag = 0;
}
}
})

Sie haben vielleicht bemerkt, dass wir dabei sind, springen Sie auf den event-bus an, dass der code.

Das erste, was wir zu tun haben, ist die Einrichtung eines Pfads für das senden eines Ereignisses von einer Komponente zur anderen. Wir ebnen kann, dass der Pfad mit eventBus.$emit() (mit emittieren als ein schickes Wort für das versenden). Das senden ist unter zwei Methoden, handleIncrement und handleDecrement, das Zuhören für die input-Beiträge. Und wenn Sie passieren, unsere event-bus Rennen, um jede Komponente der Daten anfordert, und sendet die Requisiten über.

Sie haben vielleicht bemerkt, dass wir hören, wird für beide Veranstaltungen in der geschaffenen() lifecycle-Haken mit eventBus.$auf(). In beiden Veranstaltungen haben wir zu übergeben, die in der Zeichenfolge entspricht, die Veranstaltung, die wir emittiert. Das ist wie ein Bezeichner für ein bestimmtes Ereignis und die Sache festgestellt, dass ein Weg für eine Komponente zum empfangen von Daten. Wenn eventBus erkennt eine Besondere Veranstaltung, die angekündigt wurde, die Funktion, die folgendermaßen aufgerufen wird — und wir setzen einen text zur Anzeige, was geschehen war, und machen es verschwinden nach drei Sekunden.

Praxis-Aufgabe: Umgang mit mehreren Komponenten

Sagen wir, wir arbeiten an einer Profil-Seite, wo Benutzer aktualisieren Ihren Namen und E-Mail-Adresse für eine app und dann das update angezeigt, ohne die Seite aktualisieren. Erreicht werden kann dies problemlos mit Hilfe von event-bus, obwohl wir es mit zwei Komponenten zu dieser Zeit: das Profil des Benutzers und das Formular abschickt, Profil änderungen.

Finden Sie den Stift Vuejs Event-Bus 2 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Hier ist die Vorlage:

<div class=”container”>
<div id=”Profil”>
<h2>Profil</h2>
<div>
<p>Name: {{name}}</p>
<p>E-Mail: {{ E-Mail }}</p>
</div>
</div>

<div id=”edit__Profil”>
<h2>Enter your details below:</h2>
<form @vorlegen.verhindern=”handleSubmit”>
<div class=”form-field”>
<label>Name:</label>
<input type=”text” v-model=”user.name” />
</div>
<div class=”form-field”>
<label>Email:</label>
<input type=”text” v-model=”user.E-Mail” />
</div>
<button>Abschicken</button>
</form>
</div>
</div>

Wir passieren die ids (Benutzer.name und user.E-Mail)an die entsprechende Komponente. Erste, lassen Sie uns die Vorlage für das Profil Bearbeiten (edit__ – Profil) – Komponente, die enthält den Namen und die E-Mail-Daten, die wir weitergeben wollen an die Profile-Komponente werden wir weiter. Wieder haben wir festgestellt, einen event-bus zu emittieren, dass die Daten, nachdem Sie erkannt hat, dass eine Eingabe-Ereignis stattgefunden hat.

neue Vue({
el: “#edit – __ – Profil”,
Daten() {
return {
Benutzer: {
name: “,
E-Mail:”
}
}
},
Methoden: {
handleSubmit() {
eventHub.$emit(‘form-übermittelt’.Benutzer)
diese.user = {}
}
}
})

Diese Daten werden verwendet, um reaktiv Aktualisierung des Profils auf die Benutzer in der Profile (Profil) – Komponente, die die Suche nach Namen und E-Mail zu kommen, wenn der bus kommt an der Nabe.

neue Vue({
el: ‘#Profil’,
Daten() {
return {
name: “,
E-Mail:”
}
},
erstellt() {
eventHub.$auf(‘form-übermittelt’, ({ name, email}) => {
diese.name = name;
diese.E-Mail = E-Mail
})
}
})

Ihre Koffer sind gepackt. Jetzt alles, was Sie tun müssen ist, gehen Sie nach Hause.

Ziemlich cool, Recht? Obwohl das Profil Bearbeiten und Profil Komponenten sind nicht verwandten oder nicht in einer direkten Eltern-Kind-Beziehung) — es ist möglich für Sie, um miteinander zu kommunizieren, verbunden durch das gleiche Ereignis.

Rollin’ entlang

Ich habe gefunden, Event-Bus in Fällen hilfreich, in denen ich Sie aktivieren möchten Reaktivität in meinem app — speziell für das update einer Komponente basierend auf der Antwort vom server bezogen, ohne dass die Seite zu aktualisieren. Es ist auch möglich, dass das Ereignis, das emittiert wird gehört werden kann von mehr als einer Komponente.

Falls Sie noch weitere interessante Szenarien der Verwendung von event-bus, ich werde gerne hören, über Sie in den Kommentaren. 🚌