Question

彻底研究了这个问题并在实现了Bus方法之间进行兄弟姐妹之间的沟通后，我收到了一个webpack错误，所以要么我是没有实现权利（截至昨天使用最新的CLI），或者我需要一些其他方法。

我是Vue的新手，来自React，我在app.vue中构建了一个包含2个组件的简单app：

发送数据的输入：

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

和应该接收数据的地图容器：

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

我通过以下方式成功实施了GoogleInput中的子通信（app.js）：

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; });

我收到了网络包错误：

Error in created hook: "TypeError: __WEBPACK_IMPORTED_MODULE_1_vue__.$on is not a function"

我正在寻找“最短的距离”来将我的输入传达给地图容器，而不是解决webpack问题（如果这是一个webpack问题，或者只是一个胖手指错误）。

BTW：如果vuex不是一个耗时的实现方法（如React-Redux所示），那么也是一条很酷的路线，但我必须保持这种设计（已经在 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