是否可以在不使用 Vue.js 中的全局 EventBus 的情况下将事件从一个组件发送到另一个组件？答案

【问题标题】：Is it possible to send an event from one component to another without using a global EventBus in Vue.js?是否可以在不使用 Vue.js 中的全局 EventBus 的情况下将事件从一个组件发送到另一个组件？
【发布时间】：2019-07-19 06:49:57
【问题描述】：

我有两个没有父子关系的组件。它们彼此不相关。但我正在努力做到这一点，以便当一个组件发出事件时，另一个组件可以侦听该事件并执行操作。

这是一个例子，假设我有一个名为“reset-component”的组件，在某些时候它会发出一个名为“reset”的事件。

<reset-component @reset="actionReset" />

我还有一个“grid-component”，它应该监听“reset-component”发出的“reset”动作并执行一些动作。

<grid-component />

我有哪些选择可以做到这一点？我能想到的唯一解决方案是使用 EventBus 发出一个全局事件，然后让网格组件监听该全局事件。但这是个好主意吗？这不是更多的反模式吗？

// Reset component
EventBus.$emit('reset')

// Grid component
created()
{
    EventBus.$on('reset', () => {
        doSomething()
    })
}

【问题讨论】：

考虑使用 Vuex（全局状态管理器）来避免此类问题

标签： javascript vue.js vue-component

【解决方案1】：

您可以使用主题来完成此操作。有关详细信息，请参阅此链接：Vue.js + RxJS - Communicating Between Components with Observable & Subject

【讨论】：

这有点像全局事件发射器/监听器

【解决方案2】：

您实际上有多种选择。但正如您已经回答自己的那样，全球事件总线就是其中之一

在你的主文件中（假设类似 main.js）你可以这样做

Vue.prototype.$bus = new Vue()

通过这样做，您现在可以在每个组件中访问this.$bus，例如

methods: {
  dispatchReset () {
    this.$bus.$emit('reset')
  }
}

而其他组件可以通过

created () {
  this.$bus.$on('reset', this.doReset)
}

Vuex 是 @Armen Armus 在 cmets 中已经提到的另一个选项。您可以为您的应用程序保存一个全局状态，并从您想要的每个组件中分派事件。但是，如果您真的只想要一些事件，例如重置，我看不出添加 vuex 的理由。

另一种选择也可以是在根 Vue 实例/组件中简单地保持一个“状态”，但这需要您从每个视图/组件中传递道具并传递事件——这会很烦人。

【讨论】：

我同意，我的应用程序太小了，没有理由引入像 Vuex 这样的大型库，所以我一直在寻找替代方案。所以看起来唯一真正可行的选择是全球总线..
全局事件总线有问题吗？
我听说它被称为反模式，因为使用全局事件总线很难理解事件的来源。

【解决方案3】：

当由于距离或应用程序复杂性而将 props 传递给子组件和向父组件发送事件变得困难时，您可以使用 VueX： https://vuex.vuejs.org/

【讨论】：

好吧，我的应用程序非常小，所以我不想为这项任务引入像 Vuex 这样的大库。

【解决方案4】：

您也可以只添加到实例挂钩：

ResetComponent.$on("reset", doSmth)

vm.$on

但我想这会产生关系。

【讨论】：

【解决方案5】：

是的，您可以在组件中使用 vm.$on 和 vm.$emit。

在您的reset-component 中从任何方法或元素触发事件

this.$emit('reset')

然后你就可以听了，

<reset-component @reset="actionReset" />

【讨论】：