Communication between sibling components in Vue.js 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.js 2.x, the preferred method for sibling communication is to use a store or an event bus.

According to Evan (creator of Vue.js):

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

With Vue.js 2.0, I'm using the eventHub mechanism as demonstrated in the documentation.

1. Define centralized event hub.

    const eventHub = new Vue() // Single event hub
   
    // Distribute to components using global mixin
    Vue.mixin({
        data: function () {
            return {
                eventHub: eventHub
            }
        }
    })
   

2. Now in your component you can emit events with

    this.eventHub.$emit('update', data)
   

3. And to listen you do

    this.eventHub.$on('update', data => {
    // do your thing
    })
   

Update

Please see the answer by alex, which describes a simpler solution.