VueJs 2.0中兄弟组件之间的通信

Question

在vuejs 2.0 model.sync中将被弃用。

那么，在vuejs 2.0中兄弟组件之间进行通信的正确方法是什么？

我在Vue 2.0中发现的想法是通过使用商店或事件总线进行兄弟姐妹的沟通。

据埃文说：

值得一提的是“在组件之间传递数据”通常是一个坏主意，因为最终数据流变得无法跟踪并且很难调试。

如果一个数据需要由多个组件共享，则更喜欢 全局存储或Vuex。

[ 链接到讨论 ]

和：

.once并且.sync已弃用。道具现在总是单向下降。要在父作用域中产生副作用，组件需要显式地emit显示事件而不是依赖于隐式绑定。

（所以，他建议使用$emit和$on）

我很担心因为：

每个store并event具有全球知名度（纠正我，如果我错了）;

为每个次要的沟通创建一个新的商店是很重要的;

我想要的是以某种方式或兄弟姐妹组件的可见性范围。或者也许我没有抓住这个想法。eventsstores

那么，如何以正确的方式沟通？

Answer 1

使用Vue 2.0，我正在使用文档中演示的eventHub机制。定义集中式事件中心。const eventHub = new Vue() // Single event hub// Distribute to components using global mixinVue.mixin({    data: function () {        return {            eventHub: eventHub        }    }})现在在您的组件中，您可以发布事件this.eventHub.$emit('update', data)并且倾听你的意思this.eventHub.$on('update', data => {// do your thing})

Answer 2

您甚至可以缩短它并将根 Vue实例用作全局事件中心：第1部分：this.$root.$emit('eventing', data);第2部分：mounted() {    this.$root.$on('eventing', data => {        console.log(data);    });}