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

【问题标题】：How to render VueJS templates dynamically inside custom element如何在自定义元素中动态呈现 VueJS 模板
【发布时间】：2019-06-08 16:39:27
【问题描述】：

我正在使用 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 函数中插入组件。

【问题讨论】：

标签： javascript vue.js popup vue-component esri

【解决方案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;
}

【讨论】：