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而不是硬编码html呈现的Vue组件。

我有一个组件：

 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;
}

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

1 个答案: