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 不会被重新执行。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/23439.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为啥要在虚拟机上搞开发呢:一个码农的Mac折腾史

作为一个码农&#xff0c;我一直在不停地学习新技术&#xff0c;适应新环境。但说实话&#xff0c;我最大的挑战之一是那天我决定从 Windows 转投 Mac 的阵营。 一开始&#xff0c;我还挺犹豫的。 Windows 和 Linux 一直是我求学和工作的得力伙伴。我在那个熟悉的世界里觉得很…

电流继电器JL-31 柜内固定安装 约瑟JOSEF

JL系列电流继电器型号&#xff1a; 电流继电器JL-31 电流继电器JL-31C/1 电流继电器JL-31A 电流继电器JL-31/B 电流继电器JL-32BP 电流继电器JL-22 电流继电器JL-21 电流继电器JL-21B 电流继电器JL-23 电流继电器JL-11 电流继电器JL-11/2G 电流继电器JL-11C 电流继电器J…

代码随想录 | Day16 | 二叉树:翻转二叉树对称二叉树

代码随想录 | Day16 | 二叉树&#xff1a;翻转二叉树&&对称二叉树 主要学习内容&#xff1a; 1.二叉树的递归遍历 2.判断二叉树的递归遍历的方式是前中后那个非常重要 226.翻转二叉树 226. 翻转二叉树 - 力扣&#xff08;LeetCode&#xff09; 递归遍历 思路&am…

Python正则表达式:深度解析URL匹配与操作

Python正则表达式&#xff1a;深度解析URL匹配与操作 在Python编程中&#xff0c;正则表达式&#xff08;Regular Expression&#xff0c;简称regex或regexp&#xff09;是一种强大的文本处理工具&#xff0c;它可以帮助我们快速匹配、查找、替换复杂的文本模式。在处理URL&am…

C语言二级指针、指针数组

一、二级指针 指针变量也是变量&#xff0c;是变量就应有地址&#xff0c;那指针变量的地址存放在哪里&#xff1f;存放在二级指针变量。 此时&#xff0c;*ppa pa&#xff0c;**ppa a。 二、指针数组 指针数组&#xff0c;顾名思义就是存放指针的数组。 数组每个元素为int类…

【java11】java11新特性之Optional类API改进

Java 11向Optional类引入了新方法isEmpty()来检查值是否存在。如果值存在&#xff0c;则isEmpty()返回false&#xff0c;否则返回true。 它可以用作isPresent()方法的替代方法&#xff0c;该方法通常需要否定以检查值是否不存在。 Optional.isEmpty()方法的使用&#xff1a; …

可视化表单生成器好用吗?

当前的社会竞争是非常大的&#xff0c;随着业务的上涨&#xff0c;很多客户都需要找到更高效、更理想的软件平台产品实现流程化办公。这就需要了解低代码技术平台了。作为新的办公助力软件平台&#xff0c;低代码技术平台更好操作、更灵活、功能更多&#xff0c;其中可视化表单…

.net5.0简体中文语言包

下载地址&#xff1a;https://download.csdn.net/download/wgxds/88979915

Splatter Image: Ultra-Fast Single-View 3D Reconstruction

Splatter Image: Ultra-Fast Single-View 3D Reconstruction 飞溅图像&#xff1a;超快速单视图3D重建 Stanislaw Szymanowicz  Christian Rupprecht  Andrea Vedaldi 克里斯蒂安鲁普雷希特安德烈韦达尔迪 Visual Geometry Group — University of Oxford {stan,chrisr,vedal…

医学领域科技查新点提炼方法!---附案例分析

医学领域的查新项目研究范围较广&#xff0c;涉及基础医学、临床医学、中医学、预防医学、卫生学、特种医学等众多与人类健康和疾病有关的科学。查新目的主要包括立项、成果鉴定和报奖&#xff0c;有的期刊投稿也要求作者提供查新报告。 医学领域查新项目的两极化较明显&#…

t1t1t1t1t1t1t1

在这里插入代码片t1t1t1t1t1t1t1t1

c语言练习:POJ 1003 宿醉(HangOver)

为什么写这篇文章 作为一名计算机相关方向的学生&#xff0c;本人的代码能力却十分差劲&#xff0c;这不能不让人万分羞愧。于是&#xff0c;决定从此好好学代码&#xff0c;每天坚持刷题。而C语言是计算机程序语言的基础&#xff0c;遂决定从c语言开始&#xff0c;提高自身编…

2.6倍!WhaleTunnel 客户POC实景对弈DataX

作为阿里早期的开源产品&#xff0c;DataX是一款非常优秀的数据集成工具&#xff0c;普遍被用于多个数据源之间的批量同步&#xff0c;包括类似Apache DolphinScheduler的Task类型也对DataX进行了适配和增强&#xff0c;可以直接在DolphinScheduler里面利用通用的数据源调用Dat…

问题:合规电动自行车国家标准是() #学习方法#媒体#经验分享

问题&#xff1a;合规电动自行车国家标准是&#xff08;&#xff09; A&#xff0e;必须有脚踏能实现人力骑行 B&#xff0e;最高设计车速不大于25km/h C&#xff0e;整车质量不大于55kg D&#xff0e;电机输出功率不大于240w 参考答案如图所示

dynamic多数据源的简单使用

背景 这几天搞了个saas项目&#xff0c;里面用到了多数据和execl模板导出功能&#xff0c; 其实我是经常用到的&#xff0c;但没在博客中写过&#xff0c;最近有点时间&#xff0c;正好稍微写一下。 方便大家使用 这次我先写多数据&#xff0c;execl模板导出下次有空在写。 使…

linux常用命令及用法

一.linux系统下可以在帮助中查看每一个命令的用法&#xff1a; 方法&#xff1a;cmd --help 例如&#xff1a; ls --help 二.常用命令 1.find 命令 find / -name aa //根目录下搜索aa的文件或者目录 find -name aa //相当于 find ./ -name aa 直接在当前…

破解App推广难题,Xinstall地推助手APP助你轻松触达海量用户

在日新月异的互联网环境中&#xff0c;App推广和运营面临着前所未有的挑战。流量红利逐渐衰退&#xff0c;用户获取成本不断攀升&#xff0c;如何迅速搭建起能满足用户需求的运营体系&#xff0c;成为众多企业亟待解决的问题。今天&#xff0c;我们将为大家介绍一款能够轻松解决…

易语言被嘲讽24年,但这个新式中文编程却大受好评?

被嘲讽了20年的易语言 在众多广为人知的编程语言中&#xff0c;如Java、C语言和Python&#xff0c;它们都是开发者们耳熟能详的工具&#xff0c;然而&#xff0c;有一门名为“易语言”的编程语言&#xff0c;可能并不被大多数人所熟知。 易语言&#xff0c;诞生于本世纪初&…

ubuntu开机黑屏

BusyBox v1.30.1 (Ubuntu 1:1.30.1-4ubuntu6.1) built-in shell (ash) Enter help for a list of built-in commands. 解决&#xff1a; help 看看哪个盘出问题了 fsck -y /dev/sda1 &#xff08;出问题的磁盘/分区&#xff09; reboot 就可以进入系统了 fsck命令&#xf…

Vulnhub-DC-3

joomla3.7.0的提权 靶机IP:192.168.20.136 kaliIP:192.168.20.128 网络有问题的可以看下搭建Vulnhub靶机网络问题(获取不到IP) 信息收集 首先nmap扫端口和版本&#xff0c;dirsearch跑下目录&#xff0c;wappalyzer也可以用下 发现服务器用的ubuntu&#xff0c;JoomlaCMS等…