Ausführliche Erläuterung der Kommunikation zwischen EventBus-Geschwisterkomponenten

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der EventBus-Geschwisterkomponentenkommunikation geben. Was sind die Vorsichtsmaßnahmen für die EventBus-Geschwisterkomponentenkommunikation?

In vue1.0 wird die Kommunikation zwischen Komponenten hauptsächlich dadurch erreicht, dass vm.$dispatch entlang der übergeordneten Kette nach hochlädt und vm.$broadcast zum Senden nach unten verwendet. In vue2.0 wurde diese Verwendung jedoch abgeschafft.

Nach dem Hinzufügen 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.

In einigen kleinen Projekten oder für Leute wie mich, die erst in der Mitte des Schreibens entdeckt haben, dass $.broadcast und $dispatch in vue2.0 nicht verwendet werden können, 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 des Ereignisses zu realisieren, das diese Instanz auslöst bzw. überwacht.

Hier ist ein einfaches Beispiel:

Wir haben hier zum Beispiel 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

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

ein Klickereignis hinzu Um die Kommunikation mit der Show-Komponente in der doClick()-Methode zu implementieren, 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 erstellen wir 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 wird jedes Mal, wenn wir in die Klickkomponente klicken, das Ereignis mit dem Namen „getTarget“ im Bus ausgelöst und das event.target des Klickereignisses 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 oder großes Projekt handelt und die Kommunikation komplizierter ist, empfiehlt es sich, vuex direkt zu verwenden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Zuweisungsprobleme von Vue-Arrays und -Objekten

Bootstrap- und Vue-Operations-Benutzerinformationen hinzufügen und löschen

Wie implementiert Yuansheng JS den asynchronen Datei-Upload

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Kommunikation zwischen EventBus-Geschwisterkomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!