如何从另一个 Vue 组件触发 Mapbox 事件？答案

【问题标题】：How to trigger Mapbox events from another Vue component?如何从另一个 Vue 组件触发 Mapbox 事件？
【发布时间】：2021-01-20 20:28:55
【问题描述】：

我正在尝试将地图网站移至 Vue。

该网站使用 vanilla JS，从公共 API 获取 JSON 并构建 1) 带有卡片列表的侧边栏和 2) 地图。

在 Vue 中，很明显我将这两个部分分成不同的组件，如下所示：

<template>
  <div>
    <CardsList :cards-data="this.info" />
    <Map :cards-data="this.info"  />
  </div>
</template>

因为 Mapbox 仅在 Map 组件中初始化，所以我很难在卡片列表中获取一些事件处理程序，因为它们应该与 Map 交互。它看起来非常复杂。

我做错了什么？ Map 是否应该在 App.vue 上初始化并且侧边栏是唯一的组件？像 map.getLayer 这样的 Mapbox GL JS 表达式可以在组件上使用吗？

【问题讨论】：

你可以使用 emit 和 handlers 在两者之间进行通信 - 或者使用 vuex
是的，但事实证明它非常复杂。最重要的是，卡片中的任何点击处理程序都不会“看到” Mapbox GL JS。
好吧，我不知道你当前页面的来龙去脉，我不知道，例如点击处理程序在听什么，也不知道它应该做什么 - 我'我不会涉足您当前的站点来找出答案 - 发射和处理程序适用于简单的事情，vuex 使更复杂的交互变得简单 - 但是，我再次建议如何使用任何一个，因为您站点中的逻辑是未知的我
不，我明白了。我一直在研究 emits、vuex 等。但我的问题还在于 Cards 组件无法使用 Map 函数。我做错了吗？或者我应该使用 emit/vuex 并在组件之间传递信号，所以我点击 Cards 并 Map 地图会显示一个弹出窗口？
是的，后者似乎是一种方法——另一种方法可能是创建一个插件，使卡片和地图中所需的任何功能对两者都可用——但是，我不确定是否这一定很容易

【解决方案1】：

我常用的模式是使用EventBus。

你可以看到这个here的例子。

【讨论】：