Vue.js Tutorial: Communication Between Components, Child to Child

The last direction, how Vue.js components can communicate is child->child, or non parent->child respectively. In simple cases, central event bus fits for this type of communication.

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.

Event Bus

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”.

Summary

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:

  1. tutorial preview
  2. parent -> child communication
  3. child -> parent communication

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.