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

Question

我有一个显示谷歌地图的应用程序，其中添加了位置自动完成控制器，就像谷歌的示例一样

当搜索并选择地址或更改地图范围时，我将其称为algolia搜索，该事件具有onResult事件，该事件在收到响应时触发。

我正在尝试将所有这些变成VUE js组件。 我设法获得了谷歌地图组件和自动完成组件。

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

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

IE更改位置是自动完成事件。 我需要重新映射地图并进行搜索。

但是，如果它们是两个不同的组件，我将无法获得对Google地图的引用。

当我进行agolia搜索时，事件触发将标记传递给地图时，也需要引用该地图。

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

我错过了什么吗？还是简单的商店和全球活动巴士走了？

Answer 1

TL; DR;

Vuex可以解决您的问题，但需要查看更多代码以了解发生了什么

有多种方法可以实现此目的，但我仅列出两种。

全球状态管理（Vuex）和道具/听众

全球状态管理（Vuex）

如果您知道每个组件只有一个实例（一个映射，一个自动完成），那么这是一种简单，快速且可靠的解决方案。 这两个组件不需要彼此了解，它们都与全局商店打交道。 自动完成功能将更新存储中的数据，并且只要其订阅的变量发生更改，地图就会收到通知，并进行相应更新。

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

道具/的Emit

如果两个组件具有直接连接（ 同级关系或父子关系），则首选使用此交互（IMHO）。

自动完成组件可以设置一个@change甚至一个v-model ，该父组件将使用prop链接到map组件。

看来您可能是这样做的，这没有错 ，但是如果没有看到任何代码，就很难进行评估。