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

新手上路,请多包涵

概述

在 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()


关注点

我担心的是:

  • 每个 storeevent 都具有全局可见性(如果我错了,请纠正我);
  • 每次小交流都新建一个店铺太浪费了;

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


问题

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

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

阅读 496
2 个回答

在 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 许可协议

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

组件 1:

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

组件 2:

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题