vuejs 在多个组件之间访问事件和数据

Question

我有一个显示谷歌地图的应用程序，其中添加了地点自动完成控制器，就像example from google

当一个地址被搜索和选择，或者地图边界被改变时，我调用 algolia search，它有一个 onResult 事件，当它收到响应时被触发。

我正在尝试将这一切都变成 VUE js 组件。我设法获得了一个谷歌地图组件和一个自动完成组件。

我首先加载自动完成功能，然后将谷歌地图的已安装部分附加为控制器。

我开始失败的地方是组件之间的互操作性。

I.E on place change 这是一个自动完成事件。我需要重新定位地图并进行搜索。

但如果它们是两个不同的组件，我无法获得对谷歌地图的参考。

当我将 agolia 搜索带入游戏时，它还需要在事件触发时参考地图以将标记传递给它。

我开始尝试使用简单的视图存储，但这似乎是我紧密耦合组件。

我是否错过了什么，或者是简单的商店和全球活动巴士？

Answer 1

TL;DR;

Vuex 可能会解决你的问题，但需要查看更多代码才能知道发生了什么

有多种方法可以实现，但我只列出两种。

全局状态管理 (Vuex) 和 props/listeners

全局状态管理 (Vuex)

如果您知道每个组件只有一个实例（一个地图，一个自动完成），这是一种简单、快速且可靠的解决方案。这两个组件不需要相互了解，它们都处理全局存储。自动补全会更新 store 中的数据，每当它订阅的变量发生变化时都会通知地图，并相应地更新。

缺点是......
使用 vuex 使得重用和组件变得更加困难。一旦您拥有多个实例（即两个自动完成和两个地图），那么您可能会遇到一些问题，因此您需要增加额外的复杂性。

道具/发射

如果两个组件有直接联系，siblings 或 parent-child 关系，最好使用这种交互（恕我直言）。

autocomplete 组件可以设置@change 甚至v-model，该父组件将使用道具链接到 map 组件。

看起来你可能是这样做的，这没有错，但是没有看到任何代码，很难做出评估。