【问题标题】:vuejs2 - how to create event buses for single file component hierarchiesvuejs2 - 如何为单个文件组件层次结构创建事件总线
【发布时间】:2017-05-28 15:44:47
【问题描述】:

我找到了 LinusBorg here 的解决方案,它在任何 Vue 实例中全局注册总线。有没有办法在组件层次结构中定义它,以便我可以创建多个范围总线?基本上,如果我有多个带有一些子级的“根”级组件,则应该为“根”级组件及其子级而不是所有 Vue 实例实例化一个事件总线。

我不能使用简单的$emit$on,因为层次结构不限于简单的parent-child 通信。所以事件必须跨越多个级别。

【问题讨论】:

  • 如果您只想发射回父级,那么您可以使用:this.$parent.$emit 直接发射给它,或者使用this.$emit 并直接在组件上监听事件。
  • 层次结构有多个组件,而不仅仅是直接的子 -> 需要父通信。我会更新问题。

标签: vue.js vue-component


【解决方案1】:

你可以创建一个类似eventBus.js的js文件,然后导出一个vue实例:

import Vue from 'vue'
const bus = new Vue()
export default bus

然后您可以在 .vue 文件中导入事件总线

import bus from 'path/to/eventBus'

...

bus.$on('foo', ...)

从 cmets 的讨论中更新我的答案:

由于事件名称只是一个字符串,您可以为事件添加前缀/命名空间,例如 bus.$emit('domain.foo')bus.$emit('domain/foo')

如果你觉得你的应用程序变得越来越复杂,那就选择 vuex。

【讨论】:

  • 如何在子组件中使用它?导入总线将创建一个新实例。那么如何才能将总线绑定到组件层次结构呢?
  • @Johannes 不,实例只会创建一次。您导入的所有bus 都是同一个实例
  • 抱歉,我不太明白。如果eventBus.js 只创建一次实例,那么使用LinusBorg 的解决方案有什么区别,我将实例绑定到Vue 原型?我要做的是创建不同范围的总线(假设我们有一个用于网格组件的范围总线,另一个用于聊天组件等)
  • 糟糕,我误解了你的问题。最简单的解决方案是为事件名称添加前缀(命名空间)。或者,只创建几个 Vue 实例,并导入对应的一个
  • 你也可以从根组件中导入总线,并通过 props 向下传递。但是如果你的应用变得这么复杂,也许是时候使用 Vuex
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-12-11
  • 1970-01-01
  • 1970-01-01
  • 2023-04-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多