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 节点的组件实例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/43073.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

开源项目有哪些机遇与挑战

目录 1.概述 2.开源项目的发展趋势 2.1. 开源项目的发展现状 2.2. 开源社区的活跃度 2.3. 开源项目在技术创新中的作用 3.参与开源的经验分享 3.1. 选择开源项目 3.2. 理解项目结构和文档 3.3. 贡献代码 3.4. 与开源社区的合作 3.5. 学习和成长 4.开源项目的挑战 …

内裤洗衣机到底值不值得买?五大高质量靠谱内衣洗衣机值得拥有

市场上出现了内衣洗衣机&#xff0c;这种洗衣机比市面上的普通洗衣机的清洁力好&#xff0c;还具有除菌功能&#xff0c;在清洗完内衣裤的过程中&#xff0c;可以将衣物上的细菌去除掉&#xff0c;但市面上的内衣品牌众多&#xff0c;什么样的牌子才好用呢&#xff1f;作为一位…

前端简历:如何写项目经历(经验)找出细节点和重难点,轻松应对面试?

&#xff08;下面内容&#xff1a;我将结合我的实际项目带大家进行每一步骤的梳理&#xff09; 项目经历-堂食外送点餐 2022年2月-2022年5月 项目描述&#xff1a;该平台提供外送订餐服务&#xff0c;用户可以在手机中轻松地浏览菜品、下单、支付、编辑地址、填写个人信息等…

手撸俄罗斯方块——游戏设计

手撸俄罗斯方块——游戏设计 概述 上一章我们介绍俄罗斯方块的基本信息&#xff0c;包括坐标点和方块的基本概念&#xff0c;这一章节我们继续介绍如何完成后续的游戏设计。 组成游戏的基本要素 俄罗斯方块作为一个 2D 的平面游戏&#xff0c;我们可以将整个参与元素做如下…

简过网:工程专业最吃香的6个证书,你考了几个了?

工程专业最吃香的6个证书&#xff0c;你考了几个了&#xff1f;我们一起来看看吧&#xff01; 1、二级建造师 报考条件&#xff1a;工程类大专及以上学历/从事相关职业 考试时间&#xff1a;3月报名、6月考试 就业前景&#xff1a;建筑设计院、房产开发公司、施工单位 2、一…

如何管理一百个ai专家智能体——ai调度系统设计

前言 如果你用过openai的chatgpt服务&#xff0c;你肯定知道一个叫做GPTs的智能体商店&#xff0c;里面提供了大量的来自官方和个人制作的专门针对某个领域的gpt助手。比如&#xff0c;你想让gpt帮忙写文章&#xff0c;并且要能够写得好&#xff0c;你就可以在商店中搜索相关的…

【C语言】符号优先级详解

C语言符号优先级详细解析 在C语言中&#xff0c;不同的运算符具有不同的优先级和结合性&#xff0c;这决定了在表达式中运算符的计算顺序。理解这些优先级和结合性是正确编写和理解C语言程序的基础。本文将详细解析C语言中的符号优先级&#xff0c;包括各类运算符的优先级、结…

Smail语句如何使用判断语句跳过验证卡密界面?谈谈思路

&#x1f3c6;本文收录于《CSDN问答解惑》专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&…

数据融合工具(5)面中心线提取

这是一个重磅工具&#xff0c;建议先看视频。 提取中心线 一、需求背景 说真的&#xff0c;当小编第一次使用ArcGIS中的Polygon To Centerline工具提取面要素中心线时&#xff0c;激动得无以言表&#xff0c;毕竟&#xff0c;以前要提取面中心线&#xff0c;是一件非常麻烦的事…

uniapp图片压缩之后在上传

压缩图片js方法&#xff0c;新建imgPress.js /** * H5压缩 二分查找算法来找到一个合适的图像质量系数&#xff0c;使得压缩后的图片文件大小接近于目标大小* param {Object} imgSrc 图片url * param {Object} callback 回调设置返回值 * */ export function compressH5(fileI…

nginx热更新详解及实战操作

Nginx热更新&#xff0c;也被称为平滑升级或热部署&#xff0c;是指在不中断Nginx服务的情况下&#xff0c;对Nginx进行升级或更新其配置&#xff0c;以实现业务的无损和用户无感知的升级过程。以下是关于Nginx热更新的详细解释&#xff1a; 一、Nginx热更新的原理 Nginx热更…

Kubernetes APIServer 几种基本认证方式

"认证"&#xff0c;形象地理解就是"你是谁"。在上文中&#xff0c;用户A在发起API请求时&#xff0c;管理员如何道该请求是用户A发起的呢&#xff1f;所以&#xff0c;客户端在发起API请求时&#xff0c;必须要携带一个身份信息来表明"我是谁"&a…

泰勒公式中拉格朗日余项和佩亚诺余项的区别及具体的应用场景案例

泰勒公式是微积分中的一个重要工具&#xff0c;用于将一个函数在某一点附近展开成多项式形式&#xff0c;以便于近似计算和分析。泰勒公式的一般形式为&#xff1a; f ( x ) f ( a ) f ′ ( a ) ( x − a ) f ′ ′ ( a ) 2 ! ( x − a ) 2 ⋯ f ( n ) ( a ) n ! ( x − a…

[CTF]-PWN:House of Cat堆题型综合解析

原理&#xff1a; 调用顺序&#xff1a; exit->_IO_wfile_jumps->_IO_wfile_seekoff->_IO_switch_to_wget_mode _IO_wfile_seekoff源码&#xff1a; off64_t _IO_wfile_seekoff (FILE *fp, off64_t offset, int dir, int mode) {off64_t result;off64_t delta, new…

AI绘画小白必备!Stable Diffusion常用插件合集,好用推荐!(附插件下载)

前言 宝子们&#xff0c;早上好啊~Stable Diffusion 常用插件&#xff0c;月月已经给大家整理好了&#xff0c;自取就好。 拥有这些SD常用插件&#xff0c;让您的图像生成和编辑过程更加强大、直观、多样化。以下插件集成了一系列增强功能&#xff0c;覆盖从自动补全提示词到…

开源项目:驱动创新与协作的时代引擎

《开源项目&#xff1a;驱动创新与协作的时代引擎》 在当今全球经济与科技环境瞬息万变的背景下&#xff0c;开源软件项目如同一颗璀璨的新星&#xff0c;在开发者社区的天空中熠熠生辉。其蓬勃发展的态势不仅成为了热门话题&#xff0c;更是引领着技术领域的变革潮流。 开源…

无法访问。你可能没有权限使用网络资源。请与这台服务器的管理员联系以查明你是否有访问权限。【解决办法】

问题描述 新建好一台windows虚拟机&#xff0c;两台设备网络是互通的&#xff0c;但是物理机在访问虚拟机的网络共享文件资源时&#xff0c;出现图下所示的报错&#xff1a;XXX无法访问。你可能没有权限使用网络资源。请与这台服务器的管理员联系以查明你是否有访问权限。用户…

echarts无法加载Map地图的问题

项目场景&#xff1a; echarts无法加载Map地图的问题 详情 查阅相关资料讲&#xff0c;echarts4.9以上版本已经移除了map&#xff0c;那么我们就得重新打包echarts文件了。打包echarts.min.js的链接&#xff1a;https://echarts.apache.org/zh/builder.html 在这个链接页面可…

考完软考之后,如何评职称?是否有有效期?

一、软考和职称之间的关系 软考和职称之间的关系可以这样理解&#xff1a;拿到软考证书并不意味着就能获得职称。软考证书是技术等级证书&#xff0c;而职称则是一种资格。如果单位聘用你做工程师&#xff0c;那么你的软考证书就可以发挥作用&#xff0c;相当于获得了职称证。…

单商户和多商户的区别

单商户商城通常由单个企业或品牌运营&#xff0c;专注于销售自家产品&#xff0c;而多商户商城则类似于一个平台&#xff0c;允许多个商家入驻并销售各自的商品。它们在经营模式、商家入驻和运营投入等方面有所不同。具体分析如下&#xff1a; 经营模式 单商户商城&#xff1…