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

Question

我正在使用 Vue 构建带有 Esri 制图的应用程序 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 函数 return 在 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 方法集成到 return 一个 DOM 元素，您可以尝试：

创建组件实例
将其渲染为文档外（通过在组件实例上调用 $mount without args）
return 组件渲染到的 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;
}

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

How to render VueJS templates dynamically inside custom element

javascript

popup

esri

vue.js

vue-component