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编译器是把字节…...

IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来
一、破局:PCB行业的时代之问 在数字经济蓬勃发展的浪潮中,PCB(印制电路板)作为 “电子产品之母”,其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透,PCB行业面临着前所未有的挑战与机遇。产品迭代…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节,供应链协同管理在供应链上下游企业之间建立紧密的合作关系,通过信息共享、资源整合、业务协同等方式,实现供应链的全面管理和优化,提高供应链的效率和透明度,降低供应链的成…...

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Mac软件卸载指南,简单易懂!
刚和Adobe分手,它却总在Library里给你写"回忆录"?卸载的Final Cut Pro像电子幽灵般阴魂不散?总是会有残留文件,别慌!这份Mac软件卸载指南,将用最硬核的方式教你"数字分手术"࿰…...

【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...