如何在Vue.js中使用h()函数将组件实例渲染到指定容器？

你当前的generateItem()只是创建了组件的VNode，但没有将它挂载到目标容器中。下面提供两种符合Vue规范的实现方式：

方案一：使用响应式数组配合v-for（推荐） #

这种方式遵循Vue的响应式原则，不需要手动操作DOM：

<template>
  <button @click="generateItem">Add item</button>
  <div class="container">
    <!-- 通过v-for渲染所有动态添加的MyItem -->
    <MyItem v-for="(item, index) in items" :key="index" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MyItem from '@/components/MyItem.vue'

// 用响应式数组存储需要渲染的项
const items = ref([])

function generateItem() {
  // 向数组中添加元素，触发响应式更新
  items.value.push({})
}
</script>

方案二：手动挂载VNode到DOM元素 #

如果确实需要用h()函数手动控制挂载，可以通过获取容器DOM元素，再调用Vue的render函数：

<template>
  <button @click="generateItem">Add item</button>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { h, render, ref } from 'vue'
import MyItem from '@/components/MyItem.vue'

const containerRef = ref(null)

function generateItem() {
  // 创建组件VNode
  const vnode = h(MyItem)
  // 获取容器DOM元素
  const container = containerRef.value
  // 将VNode挂载到容器中
  render(vnode, container)
}
</script>

注意：手动挂载时，如果多次点击会覆盖之前的组件实例。如果需要添加多个，需要在容器内创建新的DOM节点来承载每个实例，比如：

function generateItem() {
  const vnode = h(MyItem)
  const container = containerRef.value
  // 创建新的div作为每个组件的挂载容器
  const newEl = document.createElement('div')
  container.appendChild(newEl)
  render(vnode, newEl)
}

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