Question

我需要一些有关通过不受vue控制的DOM节点处理vue组件的建议，例如，将vue组件安装在v-html创建的元素上。

例如

<vue-main-component>
    <vue-component-A>
        <unmanaged-dom-nodes...> // issued by v-html
            <...>
                <vue-component-B>

很显然，vue无法自动创建vue-component-B。但是，vue-component-A能够在渲染vue-component-B后创建并挂载unmanaged-dom-nodes。

当前，我使用一种非常简单的技术：装入vue-component-A时，我使用unmanaged-dom-nodes

在data-xxx属性中通过querySelectorAll('[data-xxx]')属性检测需要成为vue组件的元素。

    // parentVm is the vm of vue-component-A
    // componentClass is vue-component-B
    const vm = new (Vue.extend(componentClass))({
        parent: parentVm,
    })

    parentVm.$once('hook:destroyed', () => void vm.$destroy());
    domNode.appendChild(vm.$mount().$el);

当前这项工作符合预期，但是我想知道是否有可能使其更强大。

用例：

不基于vue.js且允许html内容的第三方仪表板
富文本编辑器，可以接受vue组件作为内容

使用vue.js，如何正确处理vue不受管理的dom元素

0 个答案: