Vuejs强制渲染组件

Question

我是vue的新手，我不知道如何以编程的方式呈现组件。我使用的是javascript库: leaflet和我制作了一个组件来包装库。Leaflet允许显示地图并为其添加标记。为了定义点击时弹出窗口，库请求一个html内容

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

我想使用组件模板来使代码更简洁，而不是使用html字符串。我怎么才能强制渲染一个组件，让html内容传递给bindPopup函数呢？

Answer 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>

​