Vuejs - 非父子组件之间的exange信息

Question

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

情况如下：

组件A是主要组件。 B和C分别为A，D分为C。

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

我已经看到here如果组件使用相同的根组件，我们可以从第一个组件到根进行广播，然后在从根到第二个获取广播数据之后零件。 但在我的情况下，我的组件D并不直接位于根目录中，而是更深层次的组件树＆＃34; ...所以，我试过，看起来这不起作用。

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

感谢。

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

您可以使用此jsFiddle中的this.$eventBus.$on或this.$eventBus.$emit进行访问。