If you follow the tutorial step by step, firstly I managed to pass data from parent to child component. Then vice-versa from child to the parent.
Because all this data flow is one-way, it must be set separately.
There is also another way, how to send a data from one component to any other component. In our case, I need to be able to move student from one class to another directly.
What is event bus? Simple empty Vue instance, defined globally to centralize some operation between two components.
Official documentation is pretty straightforward, let’s see it in action. This is actually the final code of whole application.
Event Bus Explained
Our “bus” variable can be used in any component, not only in children.
As event bus uses the same names, emit and on, for the methods, as child to parent communication, be careful to not mix your code up.
The difference is that I use it with the globally created empty Vue instance (called “bus” in my case).
Firstly, event (optionally with data) is emitted outside of some component. Such event is now available in any other component.
Then, target component listens to the event with using the same event bus, but different function “$on”.
This is the end of the Vue.js tutorial about the component communication. If you started here, you may be interested in the previous parts, too:
But this is not all. If you use single-file components, in the next, bonus part, you find attached downloadable source code rewritten into Vue.js webpack-simple template.