Javascript 编译动态添加到DOM的Vue组件

我们有一个使用Vue作为前端框架的web应用程序

此web应用程序具有文本编辑器，作为文本编辑器功能的一部分，它将向可编辑区域添加自定义HTML（a

contenteditable

div

）

编辑器可以添加HTML，这是一个Vue组件，但我需要在将Vue组件插入DOM之前/之后以某种方式编译它

例如，假设我们有一个

contenteditable

div，如下所示：

<div contenteditable="true">
    <p>Some text</p>
</div>

---

这是最好的办法吗？如果它已经在Vue应用程序中，那么它会起作用吗？

我建议您只需使用动态组件，并在首次呈现页面时将其放在contenteditable div中即可

<div contenteditable="true">
    <component :is="myComponent"></component>
</div>

下面是一个jfiddle和一个基本的工作示例

---

有关动态组件的详细信息，请参见此处

将Vue组件插入DOM后，实例化Vue实例：

$('#ControlContainer').append("<vueComponent id='component1'></vueComponent>");

var vmComponent = new Vue({
            el: '#component1',
            mounted: function () {
            }
        });

$（'#ControlContainer'）。追加（“”）；
var vmComponent=新的Vue({
el:“#组件1”，
挂载：函数（）{
}
});

不能在另一个Vue实例中初始化Vue实例。也许它应该是一个组件。您是否尝试过创建另一个Vue实例或组件并获取其内部HTML？谢谢。我认为这将面临与我所描述的相同的问题。因为

将动态插入DOM，所以Vue不会编译/执行它。例如，用户可以单击按钮插入

，但需要告诉Vue已将其插入DOM中，并进行编译。此外，用户可能会插入多个自定义组件，因此从一开始就不可能将其包含在DOM中。您的问题令人困惑，因为您说，"... 它将向可编辑区域添加自定义HTML，“以及“…假设我们有一个类似的contenteditable div”，这似乎表明contenteditable div从一开始就已经在HTML中定义。

import Vue from 'vue'
import CustomGallery from './path/to/components/CustomGallery.vue'

new Vue({
    el: document.querySelector(".custom-gallery"),
    render: h => h(CustomGallery)
})

<div contenteditable="true">
    <component :is="myComponent"></component>
</div>

data:{
   component: false,
},
   methods: {
     setComponent(){
        this.component = 'custom-gallery';
}

$('#ControlContainer').append("<vueComponent id='component1'></vueComponent>");

var vmComponent = new Vue({
            el: '#component1',
            mounted: function () {
            }
        });