vue3将自定义组件插入指定dom

需求简要描述

页面渲染了一个 id 为 videoPlayerId 的div盒子，代码自定义了一个名为CustomComponent 的组件，现在需要在vue3中，通过纯 js 的方式将组件 CustomComponent 插入 videoPlayerId 的div中，作为其子节点。

实现代码

CustomComponent 组件

<template><div>我是CustomComponent，接收到的参数是{{params}}</div><button @click="clickButton"></button>
</template><script setup>const props = defineProps({params: {type: String,default: ''}//监听按钮被点击const clickButton = () => {emits('clickButton')}const emits = defineEmits(['clickButton'])})
</script>

待插入节点的页面代码

<template><div id="videoPlayerId"></div>
</template><script setup>//将自定义组件插入divconst insertNode = () => {const container = document.getElementById('videoPlayerId')//创建一个文档碎片节点，插入它的所有子孙节点const fragment = document.createDocumentFragment()//创建自定义组件的应用对象，并挂在到文档碎片节点上const pop = createApp(CustomComponent, {params: "动态写入的参数",//绑定的监听函数要在前面加 on，标识监听onClickButton: () => clickButton(),}).mount(fragment)container.append(pop.$el)}onMounted(() => {insertNode()})
</script>

业务补充说明

在真实且完整的业务场景中，videoPlayerId 的 div 会在点击按钮后，被别的地方动态清空，并写入新的代码，所以 CustomComponent 需要在 videoPlayerId 每次被刷新后都重新写入。

试错记录

createApp + mount
相当于将 CustomComponent 创建为Dom，取其 $el 中的 dom 渲染到页面上，可以完美实现上述场景。

render
相当于将 CustomComponent 创建为 VDom，在 videoPlayerId 被刷新后不会重新渲染，因此只有在页面初始化时，才能成功将 CustomComponent 插入 videoPlayerId，videoPlayerI 被刷新后，render 不会被重新执行。