vuejs2 - wie man Ereignisbusse für einzelne Dateikomponentenhierarchien erstellt

Question

Ich habe eine Lösung von LinusBorg here gefunden, die einen Bus global in jeder Vue-Instanz registriert. Gibt es eine Möglichkeit, dies in einer Komponentenhierarchie zu definieren, so dass ich mehrere übergeordnete Busse erstellen kann? Grundsätzlich, wenn ich mehrere "root" -level-Komponenten mit einigen Kindern hatte, sollte ein Ereignis-Bus für die "root" -level-Komponente eingerichtet werden, und es ist Kinder, und nicht alle Vue-Instanzen.

Ich kann die einfachen $emit und $on nicht verwenden, da die Hierarchie nicht auf einfache parent-child Kommunikation beschränkt ist. Also müssen Ereignisse über mehrere Ebenen hinweg durchlaufen werden.

Answer 1

Sie können eine js-Datei wie eventBus.js erstellen und exportieren nur vue Beispiel:

import Vue from 'vue' 
const bus = new Vue() 
export default bus 

dann können Sie das Ereignis Bus in Ihrem .vue Datei importieren

import bus from 'path/to/eventBus' 

... 

bus.$on('foo', ...) 

---

-Update meine antwort aus der diskussion in den kommentaren:

da ein ereignisname nur ein str ist Sie können dem Ereignis einen Präfix/Namespace hinzufügen, z. B. bus.$emit('domain.foo') oder bus.$emit('domain/foo').

Wenn Sie der Meinung sind, dass Ihre Anwendung immer komplexer wird, wählen Sie einfach vuex.