javascript - 如何在自定义元素中动态呈现 VueJS 模板

Question

我正在使用 Vue 构建带有 Esri 的 Mapping API 的应用程序。

通过 Esri API，我可以使用对象设置弹出模板内容:

const popupWindowTemplate = {
    title: "{mag} magnitude near {place}",
    content: getContent
 };

还有一个函数

getContent: function(){
      let node = document.createElement('div');
      node.innerHTML = "<button type='button'>Do my thing!</button>"
      return node;
}

但是，我希望 getTemplate 函数返回在 innerHTML 中呈现的 Vue 组件，而不是硬编码的 html。

我有一个组件:

 const buffer = Vue.component('do-mything', {
  template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
  data() {
    return {
          somevalue: ''
        };
      }
});

并怀疑它与组件渲染函数有关，但一直无法弄清楚如何将组件插入 getContent 函数中。

Answer 1

假设您集成的那个 API 期望 getContent 方法返回一个 DOM 元素，您可以尝试:

• 创建组件实例
• 将其渲染为文档外(通过在组件实例上调用 $mount without args)
• 返回组件被渲染到的 DOM 元素

实现上面的getContent方法可能如下所示:

getContent: function(){
  const vueComponent = new Vue({
    template: '<div><button type="button" @click="domything">Do my thing!</button></div>',
    methods: {
      domything() {
        console.log('Method was called')
      }
    }
  });
  return vueComponent.$mount().$el;
}