Communication between sibling components in VueJs 2.0

Question

Overview

In Vue.js 2.x, model.sync will be deprecated.

So, what is a proper way to communicate between sibling components in Vue.js 2.x?

---

Background

As I understand Vue 2.x, the preferred method for sibling communication is to use a store or an event bus.

According to Evan (creator of Vue):

It's also worth mentioning "passing data between components" is generally a bad idea, because in the end the data flow becomes untrackable and very hard to debug.

If a piece of data needs to be shared by multiple components, prefer global stores or Vuex.

[Link to discussion]

And:

.once and .sync are deprecated. Props are now always one-way down. To produce side effects in the parent scope, a component needs to explicitly emit an event instead of relying on implicit binding.

So, Evan suggests using $emit() and $on().

---

Concerns

What worries me is:

• Each store and event has a global visibility (correct me if I'm wrong);
• It's too wasteful to create a new store for each minor communication;

What I want is to some scope events or stores visibility for siblings components. (Or perhaps I didn't understand the above idea.)

---

Question

So, what is the correct way to communicate between sibling components?

Answer 1

You can even make it shorter and use root Vue instance as global Event Hub:

Component 1:

this.$root.$emit('eventing', data);

Component 2:

mounted() {
    this.$root.$on('eventing', data => {
        console.log(data);
    });
}