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

时间:2018-08-22 16:51:18

标签: javascript vue.js vuejs2 vue-component

我有一个显示Google地图的应用程序,其中添加了位置自动完成控制器,就像example from google

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

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

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

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

发生地点更改的IE,即自动完成事件。我需要重新映射地图并进行搜索。

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

当我进行agolia搜索时,当事件触发以将标记传递给它时,也需要参考地图。

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

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

1 个答案:

答案 0 :(得分:0)

TL; DR;

Vuex可以解决您的问题,但需要查看更多代码来了解发生的情况

有多种方法可以实现这一目标,但我仅列出两种。

全球状态管理(Vuex)和道具/听众

全球状态管理(Vuex)

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

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

道具/发射

如果这两个组件具有直接连接,则为兄弟姐妹父母-子女关系,则首选使用此交互(IMHO)。

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

您似乎可以这样做,这没错,但是在没有看到任何代码的情况下,很难进行评估。