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

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中是可以获取到的&#xff0c;但是在vue3 setup中…...

Mongodb索引使用限制

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第85篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…...

阿里云通义千问开源两款语音基座模型分别是SenseVoice和CosyVoice

阿里巴巴近期发布了开源语音大模型项目FunAudioLLM&#xff0c;该项目包含了两个核心模型&#xff1a;SenseVoice和CosyVoice。可以精准多语言识别并且进行语音克隆。 SenseVoice&#xff1a;精准多语言识别与情感辨识 SenseVoice主要致力于高精度多语言语音识别、情感辨识和…...

第11章 规划过程组(二)(11.10制订进度计划)

第11章 规划过程组&#xff08;二&#xff09;11.10制订进度计划&#xff0c;在第三版教材第402~404页&#xff1b; 文字图片音频方式 第一个知识点&#xff1a;主要输出 1、进度基准 经过批准的进度模型&#xff0c;只有通过正式的变更控制程序才能进行变更&#xff0c;用作…...

如何在Spring Boot中集成Hibernate

如何在Spring Boot中集成Hibernate 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将探讨如何在Spring Boot项目中集成Hibernate。Hibernate是一个广泛…...

Grind 75 | 3. merge two sorted lists

Leetcode 21. 合并两个有序链表 题目链接 思路&#xff1a; 和归并排序中 merge 部分一致 两个指针分别指向 2 个链表头每次选小的那个加入 res 中&#xff0c;对应指针后移一位;重复步骤2&#xff0c;直至一个指针到链表末尾将另一个剩余的全部 copy 到 res 中&#xff0c;链…...

MyBatis(35)如何在 MyBatis 中实现软删除

实现软删除在MyBatis中通常意味着更新数据库记录的某个字段&#xff0c;而不是真正地从数据库中删除记录。这个字段&#xff08;通常是is_deleted、deleted或status等&#xff09;被用来标记记录是否被删除。下面我们将详细探讨如何在MyBatis中实现软删除&#xff0c;包括数据库…...

C# 预处理器指令

C# 预处理器指令 概述 C# 预处理器指令是编译器在编译代码之前处理的指令。这些指令用于控制编译过程,包括条件编译、编译指令的定义和取消等。预处理器指令以 # 开头,不包含在代码的执行逻辑中,仅在编译阶段起作用。 常用的预处理器指令 1. #define 和 #undef #define…...

Perl编译器架构:前端与后端的精细分工

&#x1f527; Perl编译器架构&#xff1a;前端与后端的精细分工 Perl作为一种高级、通用的编程语言&#xff0c;其编译器的架构设计对于性能和灵活性至关重要。Perl编译器由前端和后端组成&#xff0c;它们各自承担着不同的职责。本文将深入解析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机器学习之数据处理与代码详解

大家好&#xff0c;我是微学AI,今天给大家分享一下人工智能算法工程师(中级)课程3-sklearn机器学习之数据处理与代码详解。 Sklearn&#xff08;Scikit-learn&#xff09;是一个基于Python的开源机器学习库&#xff0c;它提供了简单有效的数据挖掘和数据分析工具。Sklearn包含了…...

华为机考真题 -- 螺旋数字矩阵

题目描述&#xff1a; 疫情期间&#xff0c;小明隔离在家&#xff0c;百无聊赖&#xff0c;在纸上写数字玩。他发明了一种写法&#xff1a;给出数字 个数 n 和行数 m&#xff08;0 < n ≤ 999&#xff0c;0 < m ≤ 999&#xff09;&#xff0c;从左上角的 1 开始&#x…...

防御笔记第四天(持续更新)

1.状态检测技术 检测数据包是否符合协议的逻辑顺序&#xff1b;检查是否是逻辑上的首包&#xff0c;只有首包才会创建会话表。 状态检测机制可以选择关闭或则开启 [USG6000V1]firewall session link-state tcp ? check Indicate link state check [USG6000V1]firewall ses…...

HUAWEI VRRP 实验

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

领取serv00免费虚拟主机

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

云开发技术的壁纸小程序源码,无需服务期无需域名

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

基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui

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

顺序结构 ( 四 ) —— 标准数据类型 【互三互三】

序 C语言提供了丰富的数据类型&#xff0c;本节介绍几种基本的数据类型&#xff1a;整型、实型、字符型。它们都是系统定义的简单数据类型&#xff0c;称为标准数据类型。 整型&#xff08;integer&#xff09; 在C语言中&#xff0c;整型类型标识符为int。根据整型变量的取值范…...

科普文:jvm笔记

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

IDEA运行Tomcat出现乱码问题解决汇总

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

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Mac软件卸载指南,简单易懂!

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

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...