Kommunikation zwischen Geschwister Komponenten in Vuejs

Question

Communication between parent and child Komponenten sind ziemlich einfach mit $broadcast und $dispatch

Das Problem Ich versuche, meinen Kopf herum zu wickeln ist die Kommunikation zwischen Geschwister Komponenten. Was ich derzeit mache, ist eine $dispatch auf dem Kind, die dann von einem Ereignis auf dem Eltern vm abgefangen wird, die wiederum $broadcast an die Geschwisterkomponente ist.

IE (nicht-funktionales, vereinfachtes Beispiel):

new Vue({ 
    components: { Brother, Sister }, 
    events: { 
     'brother-to-sister-event': function(message) { 
      this.$broadcast('message-to-sister', message); 
     } 
}); 

Brother 
    this.$dispatch('brother-to-sister-event', message) 

Sister 
    events: { 
     'message-to-sister': function(message) { 
      alert('Message from Brother receiced!'); 
     } 
    } 

ich nur das Gefühl, dass ich eine Menge Ping-Pong mit, wie meine Daten tue um zwischen den Geschwister Komponenten übergeben werden. Ich konnte nicht wirklich ein gutes Beispiel in der documentation für die Behandlung dieses finden. Das obige Beispiel ist mein bestes Angebot, um es zu lösen.

Hat jemand ein gutes Beispiel dafür, wie man damit effizienter umgehen kann? Was ich anstrebe ist, wenn ich von Bruder $broadcast oder $dispatch bin, wird dies sofort von Schwester abgeholt. Dabei muss ich die Wurzel vm mit Zwischenereignissen nicht überladen.

So wäre die Lösung so etwas wie:

new Vue({ 
    components: { Brother, Sister } 
}); 

Brother 
    this.$dispatch('brother-to-sister-event', message) 

Sister 
    events: { 
     'brother-to-sister-event': function(message) { 
      alert('Message from Brother receiced!'); 
     } 
    } 

Aber ich habe nicht zu bekommen, so etwas zu arbeiten, verwaltet.

Answer 1

Die einfache Vue.js-Kommunikation von Geschwisterkomponenten kann nur über das übergeordnete Element erfolgen, wie Sie es in Ihrem Beispiel beschreiben.

Eine bessere Möglichkeit, diese Fälle für komplexere Anwendungen zu handhaben, ist ein zentraler Zustandsverwalter.

Vue.js creator hat eine redux-ähnliche Komponente veröffentlicht, die, wenn sie mit vuejs verwendet wird, ihren Status aktualisiert, obwohl Aktionen im Speicher ausgelöst werden. Dann nimmt die "Reaktivität" des vuejs-Frameworks alle Änderungen an, die am Zustand der Komponente vorgenommen wurden, und rendert sie erneut.

Die Dokumentation der Komponente ist wirklich schön
Vuex
Vuex Documentation
Vuex todo mvc example