如何在Vue中使用insertAdjacentHTML生成自定义组件？

你用insertAdjacentHTML插入自定义组件标签无效的原因很直接：这个方法只能插入静态HTML字符串，生成的是普通DOM节点，不会触发Vue的组件编译与实例化流程——Vue的自定义组件需要经过解析、初始化、挂载等步骤才能正常工作，直接插入标签做不到这些。

下面提供两种符合Vue规范的实现方式，满足你点击按钮生成组件的需求：

方式一：用createVNode和render直接操作虚拟DOM #

这种方式适合需要精准控制插入位置的场景，直接通过Vue的API创建并挂载组件：

<template>
  <button @click="addMultiSelect">添加多选组件</button>
  <div id="test3"></div>
</template>

<script setup>
import { createVNode, render } from 'vue'
import multiSelectComp from '@/views/utils/multiSelectComp'

function addMultiSelect() {
  const targetEl = document.getElementById('test3')
  // 创建临时容器，用于挂载组件
  const mountContainer = document.createElement('div')
  // 将容器插入到目标元素后方
  targetEl.after(mountContainer)

  // 创建组件虚拟节点，传入props
  const compVNode = createVNode(multiSelectComp, { arg: true })
  // 渲染组件到临时容器
  render(compVNode, mountContainer)
}
</script>

方式二：用响应式数组管理组件（更推荐） #

这种方式遵循Vue响应式开发思路，通过数组变化自动渲染组件，无需直接操作DOM：

<template>
  <button @click="addMultiSelect">添加多选组件</button>
  <!-- 遍历响应式数组动态渲染组件 -->
  <multi-select-comp 
    v-for="(_, idx) in componentList" 
    :key="idx" 
    :arg="true"
  />
</template>

<script setup>
import { ref } from 'vue'
import multiSelectComp from '@/views/utils/multiSelectComp'

// 用响应式数组记录需要渲染的组件数量/配置
const componentList = ref([])

function addMultiSelect() {
  // 添加一项，触发Vue自动渲染新组件
  componentList.value.push({})
}
</script>

注意事项 #

• 如果需要给每个动态生成的组件传递不同props，可以在数组中存储对应的配置对象，渲染时取出使用。
• 方式一中，如果后续需要销毁组件，可以调用render(null, mountContainer)来卸载组件，避免内存泄漏。

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