插入 DOM 时 Vue 编译答案

【问题标题】：Vue compile when inserting in DOM插入 DOM 时 Vue 编译
【发布时间】：2017-11-20 12:42:54
【问题描述】：

我需要在DOM 中插入一个已编译的元素，但是它将被插入到一个随机位置，而不是文档中的预定义位置...

var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

所有带有V-for、V-if/show 的方法都将不起作用，因为它们还需要预定义的元素。

我尝试过这样的事情......

document.getElementById('elPai').insertAdjacentHTML('beforeend', Vue.compile('<div><span>{{ msg }}</span></div>'));

它返回一个包含'render'和'StaticRenderFns'的对象，但是没有找到在这些对象上编译的结果，在我看来它记录在一个'Promise'中，它是在元素预定义时触发的'DOM'。

最后，还有如何使用“Vue 2”将编译到 DOM 中的元素插入？

【问题讨论】：

这听起来像XY problem。您能否向我们提供有关您正在努力实现的目标的更多信息？如果您无法使用单个 HTML 模板实现此目的，那么您可能需要求助于自定义渲染功能。或者，也许您可以将您的组件拆分成更小的部分并以这种方式组合它们。
它基本上是 angularjs 的编译，但是在 Vue，$mount 它对我有用，但编译时无法识别函数jsfiddle.net/044euft5

标签： javascript vue.js vuejs2

【解决方案1】：

试试这个

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

new MyComponent().$mount('#app')

示例来自： https://vuejs.org/v2/api/#vm-mount

【讨论】：

成功了，但是元素被编译了，找不到函数jsfiddle.net/044euft5
只有在组件内部定义的函数才能工作。组件之间有不同的通信方式只需检查谷歌（例如medium.com/@andrejsabrickis/…）
完美！我将把我的解决方案留在这里以供将来参考jsfiddle.net/044euft5/1

【解决方案2】：

你几乎做对了，但要安装它，你使用.$mount()（就像在@Wszerad 的回答中一样）：

console.clear();

var res = Vue.compile('<div><span>{{ msg }}</span></div>');

console.log(res);

var vm = new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
});

vm.$mount('#app')

<script src="https://unpkg.com/vue@2.5.5/dist/vue.js"></script>
<body>
  <div id="app"></div>
</body>

【讨论】：