使用 vanilla JS 生成 Vue 组件答案

【问题标题】：Generate Vue Component with vanilla JS使用 vanilla JS 生成 Vue 组件
【发布时间】：2020-04-07 15:52:32
【问题描述】：

我目前正在使用引导表组件来显示列表（bootstrap-table.com）

这个组件（或封装在一个 vue 组件中的 jQuery 插件）对每一列都有一个格式化程序。

源代码示例：https://examples.bootstrap-table.com/#welcomes/vue-component.html#view-source

我需要构建一组更复杂的链接，其中涉及一些可以使用 vue 轻松完成的 js 处理。

我想返回<component> 的内容，而不是返回<a> 标记的格式化程序。我已经尝试过了，但无法渲染组件。

我几乎可以肯定这是不可能的，因为子组件之前没有绑定，这意味着该组件不会“反应”。

作为替代方案，我可以构建一个生成所有必需链接的 js 函数。

这个问题的另一种说法是：是否有可能从 vanilla js 生成 vue 组件？

【问题讨论】：

标签： vue.js datatable components bootstrap-table

【解决方案1】：

上面的方法是不可能的，因为组件不能像 html 标签一样简单地呈现，因为它们可以有方法和计算数据，因此必须编译它们。

看来上述情况的解决方案是使用Vue.compile()方法：

const template = `
<ul>
  <li v-for="item in items">
   {{ item }}
  </li>
</ul>`;

const compiledTemplate = Vue.compile(template);

new Vue({
  el: '#app',
  data() {
    return {
      items: ['Item1', 'Item2']
    }
  },
  render(createElement) {
    return compiledTemplate.render.call(this, createElement);
  }
});

演示： https://codepen.io/couellet/pen/ZZNXzy

演示参考： https://snipcart.com/blog/vue-render-functions

Vue 文档： https://vuejs.org/v2/api/#Vue-compile

【讨论】：