情景
在实际开发中，有时需要动态将某个组件添加在页面上，但是这个添加的位置有点尴尬：是在某个组件内的某个节点位置，无法在模板上标记，也没有 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 不会有这个问题。