我有一个显示Google地图的应用程序,其中添加了位置自动完成控制器,就像example from google
当搜索并选择地址或更改地图范围时,我将其称为algolia搜索,该事件具有onResult事件,该事件在收到响应时触发。
我正在尝试将所有这些变成VUE js组件。我设法获得了谷歌地图组件和自动完成组件。
我先加载自动完成功能,然后将Google地图的已安装部分附加为控制器。
我开始崩溃的地方是组件之间的互操作性。
发生地点更改的IE,即自动完成事件。我需要重新映射地图并进行搜索。
但是,如果它们是两个不同的组件,那么我将无法获得对Google地图的引用。
当我进行agolia搜索时,当事件触发以将标记传递给它时,也需要参考地图。
我开始尝试使用一个简单的视图存储,但这似乎使我紧密地耦合了组件。
我错过了什么吗?还是简单的商店和全球活动巴士走了?
答案 0 :(得分:0)
有多种方法可以实现这一目标,但我仅列出两种。
全球状态管理(Vuex)和道具/听众
如果您知道每个组件只有一个实例(一个映射,一个自动完成),那么这是一种简单,快速且可靠的解决方案。这两个组件不需要彼此了解,它们都与全局商店打交道。自动完成功能将更新存储中的数据,并且只要订阅的变量发生更改,地图就会收到通知,并进行相应的更新。
缺点是...
使用vuex会使重用和组件变得更加困难。一旦拥有多个实例(即两个自动完成和两个映射),则可能会遇到一些问题,因此您将需要增加其他复杂性。
如果这两个组件具有直接连接,则为兄弟姐妹或父母-子女关系,则首选使用此交互(IMHO)。
自动完成组件可以设置@change
甚至是v-model
,该父组件将使用一个链接链接到 map 组件。支柱。
您似乎可以这样做,这没错,但是在没有看到任何代码的情况下,很难进行评估。