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

Question

我们有一个使用 Vue 作为前端框架的网络应用。

此 Web 应用程序有一个文本编辑器，作为文本编辑器功能的一部分，它会将自定义 HTML 添加到可编辑区域(contenteditable div 。)

编辑器可以添加作为 Vue 组件的 HTML，但我需要某种方式在将 Vue 组件插入 DOM 之前/之后对其进行编译。

例如，假设我们有一个 contenteditable div 像这样:

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

现在，在用户操作中，在 <p> 之后标签，编辑器将插入一个 Vue 组件。

<div contenteditable="true">
    <p>Some text</p>
    <custom-gallery></custom-gallery>
</div>

<custom-gallery></custom-gallery>是一个 Vue 组件。我如何“执行”此组件以呈现 HTML、事件处理程序等？

我的一个想法是插入一个元素，例如:

<div contenteditable="true">
    <p>Some text</p>
    <div class="custom-gallery"></div>
</div>

然后执行:

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

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

这是最好的方法吗？如果它已经在 Vue 应用程序中，它还能工作吗？

Answer 1

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

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

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