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 mixin

Vue.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);

    });

}