Question

我是vue的新手，我不知道如何以编程方式呈现组件。我正在使用javascript库：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>

Vue.js强制渲染组件

1 个答案: