vuejs2 - 在 Vue sibling 之间传递数据

Question

After researching this question thoroughly and after implementing the Bus method to communicate between siblings, I am getting a webpack error, so either i'm not implementing right (using latest CLI as of yesterday), or I need some other method.

我是 Vue 的新手，来自 React，我已经构建了一个简单的应用程序，其中包含了 app.vue 中的 2 个组件:

发送数据的输入:

<GoogleInput @searchEvent="getSearchLocation($event)"></GoogleInput>

和一个应该接收数据的 map 容器:

<GoogleMapsContainer :location="location" name="location-project"></GoogleMapsContainer>

我成功地在 GoogleInput 中实现了 child ( app.js )与 parent 的交流通过:

getSearchLocation(input) {
  this.location = input;
}

使用 GoogleInput 中的方法:
this.$emit('searchEvent', ev.target.value);
到这里一切都很顺利。

然而，当尝试通过总线方法将我的输入值传达给兄弟( GoogleMapsContainer )时:

在我的条目 index.js 中: const Bus = new Vue({});
我的发送组件中的新发射:
Bus.$emit('passLocation', {location: this.location})
在我的接收组件中:
Bus.$on('passLocation', (input) => {
this.location = input;
});
我收到一个 webpack 错误:
Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_1_vue__.$on is not a function"
我正在寻找“最短距离”来将我的输入传达给 map 容器，而无需解决 webpack 问题(如果这根本是 webpack 问题，或者只是手指错误)。

BTW: If vuex isn't a time consuming method to implement (as React-Redux is) in here, that would be a cool route as well, but I must keep this design (already in Git)

谢谢

Answer 1

您可能有一些导入错误。

在您的 index.js 中，将其导出为:

export const Bus = new Vue({});

在你做的文件中 Bus.$emit(...)或 Bus.$on(...)像这样导入:

import { Bus } from './index'; // make sure you use the correct relative path