在Vue兄弟之间传递数据

Question

在彻底研究了这个问题并且在实现Bus方法之间进行兄弟姐妹之间的通信之后,我收到了一个webpack错误,所以要么我没有正确实现(使用最新的CLI截至昨天),要么我需要一些其他方法.

我是Vue的新手,来自React,我已经构建了一个包含2个组件的简单app app.vue:

发送数据的输入:

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

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

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

我GoogleInput在app.jsvia中成功实现了child()到父通信:

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

用一种方法GoogleInput:

this.$emit('searchEvent', ev.target.value);

到目前为止,一切都很顺利.

---

然而,当尝试GoogleMapsContainer通过总线方法将我的输入值传递给sibling()时:

在我的条目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"

我正在寻找"最短的距离"来传达我的输入到地图容器,而不是解决webpack问题(如果这是一个webpack问题,或只是一个胖手指错误).

顺便说一句:如果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