如何将Vue组件集成到传单弹出窗口中？

Question

我的项目使用Vue.js和传单以标记的形式在地图上显示一些数据。

地图上的标记是绑定的弹出窗口，我想在相关数据发生变化时像任何Vue组件一样对这些内容进行反应式更新。

我检查了vueleaflet的选项，该选项为传单提供了弹出组件。但是此脚本通过组件的属性<l-popup content="a popup"></l-popup>定义了弹出窗口的内容。这种方式对我而言不太重要，因为我有一些复杂的模板要插入到弹出窗口中（包括条件语句和子组件）。

我宁愿需要类似的东西：

<l-popup>
  My elaborate content here.
</l-popup>

Answer 1

我建议您改用 vue2-leaflet 。

它具有一个弹出组件，其行为与您描述的方式相同。参见here。

如果您不想使用程序包在vue和Leaflet之间建立链接，则还有另一种解决方案。这几乎是一个把戏。

您在组件中创建了精美的内容，但是将其隐藏了：

<my-elaborate-popup-content v-show=False ref='foo'><my-elaborate-popup-content>

然后您可以像这样在代码中访问该组件的生成的html：

const template = this.$refs.foo.$el.innerHTML

并使用它填充您的弹出窗口！