如何编译动态插入contenteditable区域的Vue组件？

嘿，我之前也碰到过类似的需求——在可编辑div里插入Vue组件形式的HTML，然后让它们正常渲染。毕竟Vue默认不会自动编译contenteditable里新增的组件标签，得手动处理编译和挂载这一步。下面是我实践过的有效方案，分Vue 2和Vue 3两种场景来说：

1. 先确保组件已注册 #

不管是全局还是局部注册，得先让Vue认识你的自定义组件，不然编译的时候会报错。

Vue 2 全局注册示例 #

// 在你的Vue实例初始化前注册
Vue.component('custom-editor-block', {
  template: '<div class="editor-block"><strong>{{ title }}</strong>: {{ content }}</div>',
  props: ['title', 'content']
})

Vue 3 全局注册示例 #

import { createApp } from 'vue'
import App from './App.vue'
import CustomEditorBlock from './components/CustomEditorBlock.vue'

const app = createApp(App)
app.component('custom-editor-block', CustomEditorBlock)
app.mount('#app')

2. 插入组件HTML并手动编译 #

当你把组件标签插入到contenteditable之后，需要手动触发Vue的编译流程，把原生DOM节点转换成Vue组件实例。

Vue 2 实现方式 #

// 1. 获取可编辑区域元素
const editableDiv = document.querySelector('[contenteditable="true"]')

// 2. 准备要插入的组件HTML（带props）
const componentHtml = '<custom-editor-block title="示例组件" content="这是插入的Vue组件内容"></custom-editor-block>'

// 3. 插入到可编辑区域（用insertAdjacentHTML避免覆盖原有内容）
editableDiv.insertAdjacentHTML('beforeend', componentHtml)

// 4. 找到刚插入的组件节点
const componentNode = editableDiv.querySelector('custom-editor-block')

// 5. 手动编译挂载组件
const componentVm = new Vue({
  el: componentNode
})

// 可选：如果需要后续操作组件实例，可以把它存起来
componentNode.__vueInstance = componentVm

Vue 3 实现方式 #

import { createApp } from 'vue'
import CustomEditorBlock from './components/CustomEditorBlock.vue'

// 插入HTML到可编辑区域后
const componentNode = document.querySelector('custom-editor-block')

// 创建组件实例并挂载，同时传递props
const app = createApp(CustomEditorBlock, {
  title: '示例组件',
  content: '这是插入的Vue组件内容'
})
app.mount(componentNode)

// 可选：存储实例方便后续卸载
componentNode.__vueApp = app

3. 必须注意的几个细节 #

• 防止重复编译：可以给已编译的组件节点加个标记，比如data-compiled="true"，每次插入后先检查这个属性，避免重复编译同一个节点。
• 清理内存泄漏：当contenteditable里的组件被删除时，要手动卸载实例——Vue 2调用componentVm.$destroy()，Vue 3调用app.unmount()。可以监听可编辑区域的input事件，定期检查组件节点是否存在，不存在就清理对应的实例。
• 避免浏览器篡改DOM：contenteditable的DOM经常会被浏览器自动调整（比如自动包裹p标签），建议用insertAdjacentHTML插入组件，尽量不要直接修改innerHTML，不然可能会破坏已编译好的组件。
• 样式隔离：可编辑区域的全局样式可能会影响组件，给组件加上scoped样式或者自定义前缀类名，避免样式冲突。

内容的提问来源于stack exchange，提问作者Michael Bates