Nuxt 3中如何将Vue组件挂载到v-html渲染的元素上？

因为v-html渲染的内容不属于Vue模板编译范围，无法直接在里面使用Vue组件，所以需要手动创建组件实例并挂载到目标DOM节点，具体实现如下：

核心实现思路 #

1. 遍历v-html渲染后的图片元素，为图片父容器添加定位样式
2. 用Vue的createVNode创建CopyrightNotice组件的虚拟节点，传递必要的props
3. 为组件创建独立容器元素，挂载到图片的父容器中
4. 用render方法将组件渲染到容器内，同时继承父组件上下文以保证组件能访问全局资源
5. 在父组件卸载时清理所有手动挂载的组件，避免内存泄漏

完整代码示例 #

<script lang="ts" setup>
import { onMounted, ref, getCurrentInstance, onUnmounted, createVNode, render } from 'vue'
import CopyrightNotice from './CopyrightNotice.vue' // 替换成你的组件实际路径

const tdEls = ref<Array<HTMLTableCellElement>>([])
// 保存所有挂载的组件实例，用于卸载时清理
const mountedNotices = ref<Array<{ el: HTMLElement; vnode: any }>>([])

onMounted(() => {
  tdEls.value.forEach(td => {
    // 找到当前单元格内所有p标签下的图片
    const imageEls = td.querySelectorAll('p > img') as NodeListOf<HTMLImageElement>
    Array.from(imageEls).forEach(imageEl => {
      const parent = imageEl.parentElement as HTMLParagraphElement
      parent.style.position = 'relative'

      // 创建组件的挂载容器
      const noticeContainer = document.createElement('span')
      // 设置容器样式，让组件定位在图片右下角
      noticeContainer.style.cssText = `
        position: absolute;
        bottom: 5px;
        right: 5px;
        cursor: pointer;
      `
      parent.appendChild(noticeContainer)

      // 创建组件虚拟节点，传递需要的props（比如图片地址）
      const noticeVNode = createVNode(CopyrightNotice, {
        imageSrc: imageEl.src,
        // 传递事件回调（如果组件需要）
        onOpen: () => console.log('版权弹窗打开'),
        onClose: () => console.log('版权弹窗关闭')
      })
      // 继承父组件的appContext，确保组件能访问全局资源（如Pinia、路由）
      noticeVNode.appContext = getCurrentInstance()?.appContext

      // 将组件渲染到容器中
      render(noticeVNode, noticeContainer)

      // 记录实例，方便后续清理
      mountedNotices.value.push({ el: noticeContainer, vnode: noticeVNode })
    })
  })
})

onUnmounted(() => {
  // 卸载所有手动挂载的组件并移除容器
  mountedNotices.value.forEach(({ el, vnode }) => {
    render(null, el)
    el.remove()
  })
})
</script>

<template>
  <div>
    <table>
      <tr v-for="row in rows" :key="row.id">
        <td ref="tdEls" v-for="col in row.cols" v-html="col.content" :key="col.id" />
      </tr>
    </table>
  </div>
</template>

关键注意点 #

• 必须设置appContext：如果CopyrightNotice依赖全局资源（如Pinia状态、路由、全局指令），一定要把父组件的appContext赋值给组件虚拟节点，否则组件会因上下文缺失无法正常工作
• 清理组件实例：父组件卸载时，必须调用render(null, el)销毁组件并移除容器，否则会造成内存泄漏
• 样式定位：通过容器的CSS样式控制组件位置，确保和图片的相对布局正确
• props传递：根据组件需求传递对应的props（如图片地址、版权信息），保证组件功能正常

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