做seo网站诊断书怎么做,国外优秀的网站,网站群建设原则,网站推销怎么做ppt需求简要描述
页面渲染了一个 id 为 videoPlayerId 的div盒子#xff0c;代码自定义了一个名为CustomComponent 的组件#xff0c;现在需要在vue3中#xff0c;通过纯 js 的方式将组件 CustomComponent 插入 videoPlayerId 的div中#xff0c;作为其子节点。
实现代码
C…需求简要描述
页面渲染了一个 id 为 videoPlayerId 的div盒子代码自定义了一个名为CustomComponent 的组件现在需要在vue3中通过纯 js 的方式将组件 CustomComponent 插入 videoPlayerId 的div中作为其子节点。
实现代码
CustomComponent 组件
templatediv我是CustomComponent接收到的参数是{{params}}/divbutton clickclickButton/button
/templatescript setupconst props defineProps({params: {type: String,default: }//监听按钮被点击const clickButton () {emits(clickButton)}const emits defineEmits([clickButton])})
/script待插入节点的页面代码
templatediv idvideoPlayerId/div
/templatescript 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 插入 videoPlayerIdvideoPlayerI 被刷新后render 不会被重新执行。
