Блог

Мне нужен совет по работе с компонентами 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 монтировании я обнаруживаю элементы, которые должны стать компонентами vue в атрибутах unmanaged-dom-nodes через data-xxx , используя querySelectorAll('[data-xxx]')

     // 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 в качестве содержимого