当前位置: 首页 > news >正文

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

相关文章:

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

需求简要描述 页面渲染了一个 id 为 videoPlayerId 的div盒子&#xff0c;代码自定义了一个名为CustomComponent 的组件&#xff0c;现在需要在vue3中&#xff0c;通过纯 js 的方式将组件 CustomComponent 插入 videoPlayerId 的div中&#xff0c;作为其子节点。 实现代码 C…...

flutter封装日历选择器(单日选择)

简单封装&#xff1a; 引入库&#xff1a;table_calendar import package:generated/l10n.dart; import package:jade/utils/JadeColors.dart; import package:jade/utils/Utils.dart; import package:util/easy_loading_util.dart; import package:flutter/material.dart; im…...

SwiftUI调用相机拍照

在 SwiftUI 中实现拍照功能&#xff0c;需要结合 UIViewControllerRepresentable 和 UIImagePickerController 来实现相机功能。下面是一个详细的示例&#xff0c;展示如何使用 SwiftUI 来实现拍照功能&#xff1a; 1. 创建一个 ImagePicker 组件 首先&#xff0c;创建一个 U…...

elasticsearch (dsl)

正排索引 和 倒排索引 正排索引&#xff1a;通过id &#xff0c;查询content 倒排索引&#xff1a;通过content&#xff0c;查询到符合的 ids eg&#xff1a; 正排索引就是通过《静夜思》&#xff0c;找到整片文章。 倒排索引通过“明月”&#xff0c;找到《静夜思》 《望…...

聊聊大模型微调训练全流程的思考

前言 参考现有的中文医疗模型&#xff1a;MedicalGPT、CareGPT等领域模型的训练流程&#xff0c;结合ChatGPT的训练流程&#xff0c;总结如下&#xff1a; 在预训练阶段&#xff0c;模型会从大量无标注文本数据集中学习领域/通用知识&#xff1b;其次使用{有监督微调}(SFT)优化…...

Python变量符号:深入探索与实用指南

Python变量符号&#xff1a;深入探索与实用指南 在Python编程的世界中&#xff0c;变量符号扮演着至关重要的角色。它们不仅是存储数据的容器&#xff0c;更是构建复杂逻辑和算法的基础。然而&#xff0c;对于初学者来说&#xff0c;Python的变量符号可能会带来一些困惑和挑战…...

实验八 页面置换模拟程序设计

网上找到的程序得到的答案经过手算验证是错的&#xff0c;所以自己实现了一个&#xff0c;具体实现看代码吧&#xff0c;多余的操作已经去掉了。 #include <stdio.h> #include <stdlib.h> #include <stdbool.h>#define VM_PAGE 7 /*假设每个页面可以存放10…...

Spring类加载机制揭秘:深度解析“卸载”阶段

1. 引言 在Spring框架中&#xff0c;类的加载和卸载是一个复杂但至关重要的过程。加载主要涉及将类的字节码加载到JVM中&#xff0c;创建对应的Class对象&#xff0c;并准备使其可用的过程。而卸载&#xff0c;则是指当一个类不再被需要时&#xff0c;将其从JVM中清除&#xf…...

Jupyter Notebook快速搭建

Jupyter Notebook why Jupyter Notebook Jupyter Notebook 是一个开源的 Web 应用程序&#xff0c;允许你创建和分享包含实时代码、方程、可视化和解释性文本的文档。其应用包括&#xff1a;数据清洗和转换、数值模拟、统计建模、数据可视化、机器学习等等。 Jupyter Notebo…...

Linux C语言:数组的定义和初始化

一、数组 1、定义 在程序设计中&#xff0c;为了处理方便&#xff0c;把具有相同类型的若干变量按有序的形式组织起来&#xff0c;具有一定顺序关系的若干个变量的集合就是数组 。 2、特点 组成数组的各个变量称为数组的元素数组中各元素的数据类型要求相同元素在内存中是连…...

spring框架限制接口是否要登录过才能访问

1、引入spring 、spring boot依赖&#xff0c;这部分不再多说&#xff0c;正常开发spring boot项目就可以。 2、定义类&#xff0c;实现WebMvcConfigurer接口 package com.hmblogs.config;import com.hmblogs.config.web.interceptor.PortalTokenInterceptor; import org.spri…...

【全开源】废品回收垃圾回收小程序APP公众号源码PHP版本

&#x1f31f;废品回收小程序&#xff1a;绿色生活的新助手&#x1f331; 一、引言 随着环保意识的逐渐提高&#xff0c;废品回收成为了我们日常生活中的重要一环。但是&#xff0c;如何更方便、高效地进行废品回收呢&#xff1f;今天&#xff0c;我要向大家推荐一款超级实用…...

勒索软件分析_目标文件扫描行为分析

BlackBasta首先通过 FindFirstVolumeW 与 FindNextVolumeW 实现系统中第一个卷的搜索和其余卷的遍历,之后通过 GetVolumePathNamesForVolumeNameW 检索指定卷的驱动器号和挂载的文件夹路径列表,然后通过 GetVolumeInformationW 获取关于指定卷的信息,具体代码如下所示。 Fin…...

2024050401-重学 Java 设计模式《实战代理模式》

重学 Java 设计模式&#xff1a;实战代理模式「模拟mybatis-spring中定义DAO接口&#xff0c;使用代理类方式操作数据库原理实现场景」 一、前言 难以跨越的瓶颈期&#xff0c;把你拿捏滴死死的&#xff01; 编程开发学习过程中遇到的瓶颈期&#xff0c;往往是由于看不到前进…...

HTML跨年烟花

目录 写在前面 关于小编 HTML简介 程序设计 系列文章 写在后面 写在前面 学会了这个html烟花秀&#xff0c;跨年就不缺文案喽~ 关于小编 平易近人&#xff0c;慈眉善目&#xff0c;爱交朋友&#xff0c;舍己为人&#xff0c;和蔼可亲&#xff0c;能说会道&#xff0c;…...

微服务第二轮

学习文档 背景 由于每个微服务都有不同的地址或端口&#xff0c;入口不同 请求不同数据时要访问不同的入口&#xff0c;需要维护多个入口地址&#xff0c;麻烦 前端无法调用nacos&#xff0c;无法实时更新服务列表 单体架构时我们只需要完成一次用户登录、身份校验&#xff…...

线性模型-分类

一、线性判别分析LDA 线性判别分析是一种经典的线性学习方法&#xff0c;在二分类问题上最早是Fisher提出的&#xff0c;亦称为Fisher判别分析。 Fisher判别分析是一种用于降维和分类的统计方法&#xff0c;旨在找到可以最好区分不同类别的特征。它基于类内方差和类间方差的比…...

OpenAI前董事会成员称Sam Altman因 “ 向董事会撒谎 ” 而被解雇

据前 OpenAI 董事会成员称&#xff0c;据称 Altman 隐瞒了他对 OpenAI 创业基金的所有权。 更详细的内容请参考原文&#xff1a; https://cointelegraph.com/news/sam-altman-fired-openai-board-allegations 据一位前董事会成员称&#xff0c;Sam Altman 因涉嫌向董事会隐瞒…...

【启明智显分享】WIFI6开发板ZX6010:开源OpenWrt SDK,接受定制!

在数字化飞速发展的当下&#xff0c;网络速度和稳定性已成为各行各业不可或缺的关键因素。今天&#xff0c;我们为大家推荐一款基于IPQ6010的AX1800方案ZX6010 Wi-Fi6开发板&#xff0c;为您的网络世界注入强大动力。 一、超强硬件配置 ZX6010搭载IPQ6010四核ARM Cortex A53处…...

C语言能否使⽤ fflush( ) 函数清除多余的输⼊?

一、问题 在从终端输⼊数据时&#xff0c;很可能会输⼊多余的数据&#xff0c;那么能否使⽤ fflush( ) 函数清除呢&#xff1f; 二、解答 fflush( ) 函数只是⽤在⽂件以写的⽅式打开时&#xff0c;将缓冲区内容写⼊到⽂件。因此 fflush( ) 函数仅对输出流有效&#xff0c;对输…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...