Communication between sibling components in Vue.js 2.0

ghz 1years ago ⋅ 3699 views

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](http://forum.vuejs.org/topic/1530/pass-data-between- components/4)]

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

With Vue.js 2.0, I'm using the eventHub mechanism as demonstrated [in the documentation](https://v2.vuejs.org/v2/guide/migration.html#dispatch-and- broadcast-replaced).

  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](https://stackoverflow.com/questions/38616167/communication-between- sibling-components-in-vue-js-2-0/47004242#47004242), which describes a simpler solution.

#vue.js