uniapp vue3微信小程序如何获取dom元素
在网上很多人说可以通过下面两种形式获取到指定dom元素
// 定义ref
<div ref="box"></div>//1通过this.$refs获取dom元素
this.$refs.box//2通过ref(null)获取dom元素
let box = ref(null)
第一种方式在vue2中是可以获取到的,但是在vue3 setup中是没有this的(需要通过getCurrentInstance方法获取当前组件实例),所以这种方式排除
第二种方式在阅览器端是可以获取到的,但是在小程序端是获取不到的(这种方式可以获取到当前组件中的子组件实例),所以这种方式也排除
下面分两种情况来介绍如何在uniapp vue3微信小程序端获取dom元素
一、当前组件非子组件
<div id="box"></div>
//根据id获取
uni.createSelectorQuery().select('#box').node().exec(res => {//res[0].node未获取到的指定的dom元素对象console.log("res",res[0].node)
})
上面这种方式,只适合在非子组件的情况下使用,如果当前组件时作为子组件,需要通过下面的方式
二、当前为子组件
<div id="box"></div>
//根据id获取
const instance = getCurrentInstance();//获取当前组件实例
uni.createSelectorQuery().in(instance).select('#box').node().exec(res => {//res[0].node未获取到的指定的dom元素对象console.log("res",res[0].node)
})
注意:这种情况下需要传入当前组件的是你instance才能获取到指定dom元素
为啥子组件要多加一个instance才能获取到dom元素?
因为在 Vue 3 中,子组件实例不再直接暴露给全局或者父组件,而是需要通过 getCurrentInstance()
方法获取。这是为了更好地管理组件实例,确保组件在不同环境中的正确渲染和状态管理。通过 uni.createSelectorQuery().in(instance)
方法可以指定查询的范围,这里的 instance
需要是一个 DOM 节点或者一个包含 DOM 节点的组件实例。
相关文章:
uniapp vue3微信小程序如何获取dom元素
在网上很多人说可以通过下面两种形式获取到指定dom元素 // 定义ref <div ref"box"></div>//1通过this.$refs获取dom元素 this.$refs.box//2通过ref(null)获取dom元素 let box ref(null)第一种方式在vue2中是可以获取到的,但是在vue3 setup中…...
Mongodb索引使用限制
学习mongodb,体会mongodb的每一个使用细节,欢迎阅读威赞的文章。这是威赞发布的第85篇mongodb技术文章,欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题,欢迎在文章下面点个赞,或者关…...

阿里云通义千问开源两款语音基座模型分别是SenseVoice和CosyVoice
阿里巴巴近期发布了开源语音大模型项目FunAudioLLM,该项目包含了两个核心模型:SenseVoice和CosyVoice。可以精准多语言识别并且进行语音克隆。 SenseVoice:精准多语言识别与情感辨识 SenseVoice主要致力于高精度多语言语音识别、情感辨识和…...

第11章 规划过程组(二)(11.10制订进度计划)
第11章 规划过程组(二)11.10制订进度计划,在第三版教材第402~404页; 文字图片音频方式 第一个知识点:主要输出 1、进度基准 经过批准的进度模型,只有通过正式的变更控制程序才能进行变更,用作…...
如何在Spring Boot中集成Hibernate
如何在Spring Boot中集成Hibernate 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨如何在Spring Boot项目中集成Hibernate。Hibernate是一个广泛…...
Grind 75 | 3. merge two sorted lists
Leetcode 21. 合并两个有序链表 题目链接 思路: 和归并排序中 merge 部分一致 两个指针分别指向 2 个链表头每次选小的那个加入 res 中,对应指针后移一位;重复步骤2,直至一个指针到链表末尾将另一个剩余的全部 copy 到 res 中,链…...
MyBatis(35)如何在 MyBatis 中实现软删除
实现软删除在MyBatis中通常意味着更新数据库记录的某个字段,而不是真正地从数据库中删除记录。这个字段(通常是is_deleted、deleted或status等)被用来标记记录是否被删除。下面我们将详细探讨如何在MyBatis中实现软删除,包括数据库…...
C# 预处理器指令
C# 预处理器指令 概述 C# 预处理器指令是编译器在编译代码之前处理的指令。这些指令用于控制编译过程,包括条件编译、编译指令的定义和取消等。预处理器指令以 # 开头,不包含在代码的执行逻辑中,仅在编译阶段起作用。 常用的预处理器指令 1. #define 和 #undef #define…...
Perl编译器架构:前端与后端的精细分工
🔧 Perl编译器架构:前端与后端的精细分工 Perl作为一种高级、通用的编程语言,其编译器的架构设计对于性能和灵活性至关重要。Perl编译器由前端和后端组成,它们各自承担着不同的职责。本文将深入解析Perl编译器前端和后端的区别&a…...

14-63 剑和诗人37 - 分布式系统中的数据访问设计
在分布式系统中,跨服务和数据库提供统一、可靠的数据访问至关重要,但又极具挑战性。微服务和数据库的拓扑结构为分布、缓存、复制和同步带来了复杂性。 让我们探索有助于解决这些复杂性并简化构建强大、高性能分布式系统的常见数据访问模式。 概述 我们将通过示例介绍…...

大数据基础:Hadoop之MapReduce重点架构原理
文章目录 Hadoop之MapReduce重点架构原理 一、MapReduce概念 二、MapReduce 编程思想 2.1、Map阶段 2.2、Reduce阶段 三、MapReduce处理数据流程 四、MapReduce Shuffle 五、MapReduce注意点 六、MapReduce的三次排序 Hadoop之MapReduce重点架构原理 一、MapReduce概…...

人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解
大家好,我是微学AI,今天给大家分享一下人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解。 Sklearn(Scikit-learn)是一个基于Python的开源机器学习库,它提供了简单有效的数据挖掘和数据分析工具。Sklearn包含了…...
华为机考真题 -- 螺旋数字矩阵
题目描述: 疫情期间,小明隔离在家,百无聊赖,在纸上写数字玩。他发明了一种写法:给出数字 个数 n 和行数 m(0 < n ≤ 999,0 < m ≤ 999),从左上角的 1 开始&#x…...

防御笔记第四天(持续更新)
1.状态检测技术 检测数据包是否符合协议的逻辑顺序;检查是否是逻辑上的首包,只有首包才会创建会话表。 状态检测机制可以选择关闭或则开启 [USG6000V1]firewall session link-state tcp ? check Indicate link state check [USG6000V1]firewall ses…...

HUAWEI VRRP 实验
实验要求:在汇聚交换机上SW1和SW2中实施VRRP以保证终端网关的高可靠性(当某一个网关设备失效时,其他网关设备依旧可以实现业务数据的转发。) 1.在SW1和SW2之间配置链路聚合,以提高带宽速度。 2.PC1 访问远端网络8.8.8.8 ,优先走…...

领取serv00免费虚拟主机
参考 教程地址【免费serv00虚拟机SSH登录搭建网站】 领取地址 领到了 SSH登录要魔法,网页登录不用 轻松搭建自己的静态网站 soulio.serv00.net 网页加载速度还可以。 ...

云开发技术的壁纸小程序源码,无需服务期无需域名
1、本款小程序为云开发版本,不需要服务器域名 2、文件内有图文搭建教程,小白也不用担心不会搭建。 3、本程序反应速度极快,拥有用户投稿、积分系统帮助各位老板更多盈利。 4、独家动态壁纸在线下载,给用户更多的选择 5、最新版套图…...

基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
背景和意义 随着互联网和数字媒体行业的快速发展,视频网站作为重要的内容传播平台之一,用户量和内容丰富度呈现爆发式增长。本研究旨在设计并实现一种基于Python的哔哩哔哩数据分析系统,采用Flask框架、MySQL数据库以及echarts数据可视化技术…...

顺序结构 ( 四 ) —— 标准数据类型 【互三互三】
序 C语言提供了丰富的数据类型,本节介绍几种基本的数据类型:整型、实型、字符型。它们都是系统定义的简单数据类型,称为标准数据类型。 整型(integer) 在C语言中,整型类型标识符为int。根据整型变量的取值范…...

科普文:jvm笔记
一、JVM概述# 1. JVM内部结构# 跨语言的平台,只要遵循编译出来的字节码的规范,都可以由JVM运行 虚拟机 系统虚拟机 VMvare 程序虚拟机 JVM JVM结构 HotSpot虚拟机 详细结构图 前端编译器是编译为字节码文件 执行引擎中的JIT Compiler编译器是把字节…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...

七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
Python Einops库:深度学习中的张量操作革命
Einops(爱因斯坦操作库)就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库,用类似自然语言的表达式替代了晦涩的API调用,彻底改变了深度学习工程…...

STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...

elementUI点击浏览table所选行数据查看文档
项目场景: table按照要求特定的数据变成按钮可以点击 解决方案: <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

抽象类和接口(全)
一、抽象类 1.概念:如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象,这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法,包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中,⼀个类如果被 abs…...
Leetcode33( 搜索旋转排序数组)
题目表述 整数数组 nums 按升序排列,数组中的值 互不相同 。 在传递给函数之前,nums 在预先未知的某个下标 k(0 < k < nums.length)上进行了 旋转,使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...