Vuejs 强制渲染组件

【问题标题】：Vuejs force rendering componentVuejs 强制渲染组件
【发布时间】：2019-12-09 20:42:16
【问题描述】：

我是 vue 新手，我不知道如何以编程方式呈现组件。我正在使用一个 javascript 库：传单，我制作了一个组件来包装该库。 Leaflet 允许显示地图并向其添加标记。要定义单击时弹出窗口，该库要求提供 html 内容

...
marker.bindPopup("<h3>Title</h3>").openPopup();
...

我想使用组件模板代替 html 字符串来使代码更简洁。如何强制渲染组件，以获取要传递给 bindPopup 函数的 html 内容？

【问题讨论】：

我相信这个组件会比你想象的更有帮助：vuejsexamples.com/vue-2-components-for-leaflet-maps
谢谢，这正是我想要的！但是，我很难让它发挥作用。我做了一个基本的例子：jsfiddle.net/rvxc2uLk/3。我错过了什么？

标签： vue.js vue-component

【解决方案1】：

您可以使用.$mount() 方法和VueComponent.$el 属性从Vue 组件中获取html。如下所示

var component = new Vue({
  template: `<div>Your HTML is here...</div>`
}).$mount();

代码片段

var component = new Vue({
  template: `<div>Here is your component html</div>`
}).$mount();

console.log(component.$el);
//you can use this component.$el for you maker bindPopup
//marker.bindPopup(component.$el).openPopup();

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.2/dist/vuetify.min.js"></script>

【讨论】：