Vue.js 2.0 中兄弟组件之间的通信

Question

概述

在 Vue.js 2.x 中， model.sync 将被弃用。

那么，在 Vue.js 2.x 中的兄弟组件之间进行通信的正确方法是什么？

---

背景

据我了解 Vue.js 2.x，兄弟通信的首选方法 是使用 store 或 event bus 。

根据 Evan （Vue.js 的创建者）的说法：

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

如果一条数据需要被多个组件共享，首选 全局存储 或 Vuex 。

[ 讨论链接]

和：

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

因此， Evan 建议 使用 $emit() 和 $on() 。

---

关注点

我担心的是：

• 每个 store 和 event 都具有全局可见性（如果我错了，请纠正我）；
• 每次小交流都新建一个店铺太浪费了；

我想要的是在某个 范围内 events 或 stores 兄弟组件的可见性。 （或者也许我不明白上面的想法。）

---

问题

那么，兄弟组件之间的正确通信方式是什么？

原文由 Sergei Panfilov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 Vue.js 2.0 中，我使用了 文档 中演示的 eventHub 机制。

1. 定义集中式事件中心。

     const eventHub = new Vue() // Single event hub

    // Distribute to components using global mixin
    Vue.mixin({
        data: function () {
            return {
                eventHub: eventHub
            }
        }
    })

1. 现在在您的组件中，您可以发出事件

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

1. 听你的

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

更新

请参阅 alex 的答案，其中描述了一个更简单的解决方案。

原文由 kakoni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您甚至可以缩短它并使用 根 Vue 实例作为全局事件中心：

组件 1：

 this.$root.$emit('eventing', data);

组件 2：

 mounted() {
    this.$root.$on('eventing', data => {
        console.log(data);
    });
}

原文由 Alex 发布，翻译遵循 CC BY-SA 4.0 许可协议