如何在传单弹出窗口中集成 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。

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

还有另一种解决方案，如果你不想使用包来做 vue 和传单之间的链接。这几乎是一个伎俩。

您在组件中创建精心制作的内容，但将其隐藏：

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

然后，您可以在代码中访问该组件生成的 html，如下所示：

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

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