Detaillierte Erläuterung der EventBus-Implementierung der Geschwisterkomponentenkommunikation in vue2.0s

In diesem Artikel wird hauptsächlich der Beispielcode von eventBus in vue2.0s vorgestellt, der einen gewissen Referenzwert hat. Ich hoffe, er kann jedem helfen.

In vue1.0 wird die Kommunikation zwischen Komponenten hauptsächlich dadurch erreicht, dass sich vm.$dispatch entlang der übergeordneten Kette nach oben ausbreitet und vm.$broadcast nach unten sendet. In vue2.0 wurde diese Verwendung jedoch abgeschafft.

Nach der Hinzufügung von vuex wird die Kommunikation zwischen den Komponenten klarer. Bei mittleren und großen Projekten ist es eine kluge Entscheidung, den Einsatz von vuex von Anfang an zu planen.

Bei einigen kleinen Projekten oder für Leute wie mich, die mitten im Schreiben feststellen, dass vue2.0 $.broadcast und $dispatch nicht verwenden kann, ist jedoch eine bequemere Lösung erforderlich. Anschließend wird die Rolle von eventBus reflektiert.

Der wichtigste praktische Ansatz besteht darin, eine neue Vue-Instanz unter den Geschwisterkomponenten einzuführen, die miteinander kommunizieren möchten, und dann die Kommunikation und Parameterübertragung durch Aufrufen der Ereignisauslösung bzw. -überwachung dieser Instanz zu realisieren .

Hier ist ein einfaches Beispiel:

Zum Beispiel haben wir hier drei Komponenten: main.vue, click.vue und show.vue. click und show sind Geschwisterkomponenten unter der Hauptkomponente der übergeordneten Komponente, und click durchläuft mehrere Listenelemente in der übergeordneten Komponente über v-for. Was hier implementiert werden muss, ist, dass nach dem Auslösen des Click-Ereignisses in der Click-Komponente die Show-Komponente tröstet, auf welches DOM-Element geklickt wurde.

Zuerst fügen wir der Klickkomponente ein Klickereignis hinzu

<p class="click" @click.stop.prevent="doClick($event)"></p>

Wir wollen das Steuerelement im doClick implementieren ()-Methode Um mit der Show-Komponente zu kommunizieren, müssen wir eine neue js-Datei erstellen, um unseren EventBus zu erstellen. Wir nennen sie bus.js

import Vue from 'vue'; 
export default new Vue();

Auf diese Weise Wir erstellen eine neue Vue-Instanz. Als nächstes importieren wir es in die Click-Komponente und die Show-Komponente.

import Bus from 'common/js/bus.js';

Als nächstes lösen wir ein Ereignis in der doClick-Methode aus:

methods: { 
  addCart(event) { 
  Bus.$emit('getTarget', event.target);  
  } 
}

Hier jeder Sobald wir in die Click-Komponente klicken, wird das Ereignis mit dem Namen „getTarget“ im Bus ausgelöst und das event.target des Click-Ereignisses wird entlang des Ereignisses weitergeleitet.

Als nächstes müssen wir „bus“ im „created()“-Hook in der Show-Komponente aufrufen, um auf dieses Ereignis zu warten und die Parameter zu empfangen:

created() { 
    Bus.$on('getTarget', target => { 
      console.log(target); 
    }); 
   }

Auf diese Weise wird bei jedem Klickereignis der Klickkomponente das event.target an die Show übergeben und getröstet.

Die Verwendung von eventBus ist also immer noch sehr praktisch, aber wenn es sich um ein mittleres bis großes Projekt handelt und die Kommunikation komplizierter ist, empfiehlt es sich, vuex direkt zu verwenden.

Verwandte Empfehlungen:

Kommunikationsmethode für Vue-Bruder-Komponenten

Beispielfreigabe für Vue.js-Komponentenkommunikation

Detaillierte Erläuterung der Ereignisbus-Kommunikation von Nicht-Eltern-Kind-Komponenten in Vue

Detaillierte Analyse mehrerer Haltungen in der Komponentenkommunikation von Vue.js

Tiefer Einblick in Vue.js-Komponenten und Komponentenkommunikation

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der EventBus-Implementierung der Geschwisterkomponentenkommunikation in vue2.0s. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!