Vuejs - 在非父子组件之间交换信息

Question

我正在尝试在两个 VueJs 组件之间交换信息。

情况如下：

组件 A 是主要组件。 B和C属于A，D属于C。

我想从组件 B 更改组件 D 的变量值。

我看到here 说，如果组件使用相同的根组件，我们可以从第一个组件到根组件进行广播，然后在将广播数据从根组件获取到第二个组件之后。 但就我而言，我的组件 D 并不直接位于根目录中，而是位于“组件树”的更深处……所以，我尝试过，似乎这不起作用。

什么是最简单或更优雅的方法？

谢谢。

Answer 1

对于这样的事情，我会使用 vue 文档中描述的 Eventbus；用于传递信息的空白 Vue 对象。

window.EventBus = new Vue();

然后在接收数据的组件中，您将创建一个事件。

mounted: function () {
    EventBus.$on('name', function (data) {
        // Do something with the data
    });
}

最后，在发送数据的组件中，你需要调用那个函数。

methods: {
    someFunction: function () {
        EventBus.$emit('name', data);
    }
}

您可以创建一个原型链接以提供对 EventBus 对象的访问以方便使用。

Vue.prototype.$eventBus = window.EventBus

您可以使用this.$eventBus.$on 或this.$eventBus.$emit 访问，如jsFiddle 所示。