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编译器是把字节…...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展,光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域,IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选,但在长期运行中,例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)
1.获取 authorizationCode: 2.利用 authorizationCode 获取 accessToken:文档中心 3.获取手机:文档中心 4.获取昵称头像:文档中心 首先创建 request 若要获取手机号,scope必填 phone,permissions 必填 …...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
ip子接口配置及删除
配置永久生效的子接口,2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
Linux 内存管理实战精讲:核心原理与面试常考点全解析
Linux 内存管理实战精讲:核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用,还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
