Improve section about Non-Parent-Child communication & Event Bus

[LinusBorg]

Currently, we recommend using an event bus for non-parent-child communication here:

https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

While we do state, after the example:

In more complex cases, you should consider employing a dedicated state-management pattern.

... from what I see on the forum, SO, reddit and so on, this pattern is often abused to do things that a small global state object can solve much better, and more reliably.

I think we should add a clearer warning that this pattern is best reserved for edge cases and recommend a "global state" pattern first.

Also, the current example lacks information about the need to use $off to un-register event listeners, e.g. when a component that did set up this listener is destroyed.

[sdras]

Yeah, I agree with this, I've seen people get confused on this one a number of times now. I'm putting it on my list to create something for cookbook that we can link off to in the section so we can give it a more nuanced deep dive and provide more clarity.

[tat757]

To whoever may confuse on this one, here is an example. Hope it will help.

// EventBus.js
import Vue from 'vue'
const EventBus = new Vue()
export default EventBus

//a.vue
<template>
<button @click="handleClick">Click</button>
</template>
<script>
import EventBus from '@/EventBus.js'

export default {
  methods: {
    handleClick: function () {
      EventBus.$emit('click', 'clicked')
    }
  }
}
</script>

//b.vue
<template>
</template>
<script>
import EventBus from '@/EventBus.js'

export default {
  created: function () {
    EventBus.$on('click', function (e) {
      console.log(e) // when the button clicked, this will output 'clicked'
    }
  }
} 
</script>

[LinusBorg]

Thanks, but we understand how it works - we maintain it.

We want to explain why you should not use it in most cases.

[deathemperor]

@tat757 thanks! I was confused with the document too.