Global Event Bus: best implementation?



I’m using Vue 2 to make a GUI for a HTML5: now this GUI is made of many windows (each of them is a separate Single File Component).

Now, to pass data from parent to child I’m using the standard way via props (I pass a specific array for every window) but I find the way to emit events from child to parents too much verbose and very dirty for a project with a bit of complexity, so I switched to the Global Bus that I find the best way to use events.

Now, I have more a structural doubt: how to structure my bus? Take a single Global BUS or make a single BUS for every Window of my GUI? (this could help to mantain a bit of separation between components).

And what should I do? A separate file where I have all my events (like an EventManager.js) or spread them in every component where I need to listen an event?


Use Vuex, Which has central State as well as module level State, You can Even Define Actions, mutations to state Variables.


Exactly as @vishnutm8 said. Use Vuex (or some form of state management). An event bus is terribly unreliable and prone to bugs and much harder to debug. The great thing about Vuex is it’s well supported by Vue DevTools so you get quite a nice interface & tooling to work with.