情景

在实际开发中，有时需要动态将某个组件添加在页面上，但是这个添加的位置有点尴尬：是在某个组件内的某个节点位置，无法在模板上标记，也没有 slot 可以插入。

解决办法

使用 vue 实例的mount()方法进行挂载。没错，就是出现在main.js中的app.mount('#app')这个方法。

主要逻辑：

import {onMounted, h, createApp} from 'vue'
import ComponentVue from './Component.vue' // 引入待插入组件

setup() {
	onMounted(() => {
		// 获取需要插入内容的节点
		const dom$ = document.querySelector('#id .class')

		// 定义组件，使用 渲染函数 方法创建
		const app = createApp(h(ComponentVue, {}, {default: () => h('span', '插入内容')}))

		// 挂载组件
		app.mount(dom$)
	})
}

注意：使用渲染函数创建出入内容是，最外层（即ComponentVue所在的位置）必须是一个vue组件，而不能是普通的元素（如div等），否则会出现异常：

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'exposed')

通过错误栈追踪，得出的结论是通过渲染函数使用普通元素创建的 vNode 实例缺少属性 component 属性造成的。而通过组件创建的 vNode 不会有这个问题。