在兄弟姐妹 Vuejs 上触发事件答案

【问题标题】：Triggering Events on Siblings Vuejs在兄弟姐妹 Vuejs 上触发事件
【发布时间】：2017-07-07 16:52:37
【问题描述】：

我有一个表单，其中我对每个字段进行了 foreach 并将字段传递到它们自己的组件中。我想触发一个事件，该事件传播到从字段组件触发的所有同级字段。

我知道我可以从字段组件中做到这一点 this.dispatch('activeField', this.field);

然后形成Form组件 this.broadcast('activeField', this.field);

似乎应该有一种方法可以做到这一点，而无需涉及父母的开销。我使用的是 Vue 1.0，这个例子只是为了演示我遇到的一个问题。这是伪代码，所以很可能是拼写错误。

【问题讨论】：

【解决方案1】：

“成熟”的方法是使用 Vuex 或其他共享状态通量提供程序。但是，这不是绝对必要的。

您还可以利用独立的 Vue 实例作为事件总线，从字段组件发出消息并在表单组件中接收它。

eventBusWrapper.js

import Vue from 'vue'

const EventBus = new Vue()
export default {
    EventBus
}

字段组件

import EventBus from './eventBusWrapper'
EventBus.$emit('activeField', this.field)

表单组件

import EventBus from './eventBusWrapper'
EventBus.$on('activeField', (field) => {
    console.log(field)
});

【讨论】：

这很聪明，但我的领导会有一头牛。感谢您的提示。
@ShawnPivonka 很乐意提供帮助，但我真的不明白您的领导的反对意见。他们担心什么？
这与代码库的其余部分不一致。
@ShawnPivonka 我不确定我是否遵循并且没有看到当前一致行为的更具体示例，恐怕我无法为您提供更有用的答案。您有三个选择：使用父级与兄弟姐妹交流（但您不想这样做），使用 Vuex（这有点过头了），或者使用像我的回答这样的小型事件总线（您的领导不喜欢）。我认为您没有太多其他选择:)。