uniapp vue3微信小程序如何获取dom元素

在网上很多人说可以通过下面两种形式获取到指定dom元素

js 复制代码
// 定义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元素

一、当前组件非子组件

js 复制代码
<div id="box"></div>
//根据id获取
uni.createSelectorQuery().select('#box').node().exec(res => {
		//res[0].node未获取到的指定的dom元素对象
		console.log("res",res[0].node)
})

上面这种方式,只适合在非子组件的情况下使用,如果当前组件时作为子组件,需要通过下面的方式

二、当前为子组件

js 复制代码
<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 节点的组件实例。

相关推荐
狂团商城小师妹1 天前
预约洗车小程序
微信小程序·小程序
future_studio1 天前
聊聊 Unity(小白专享、C# 小程序 之 图片播放器)
unity·小程序·c#
Q_Q5110082851 天前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
一匹电信狗1 天前
【C++】C++风格的类型转换
服务器·开发语言·c++·leetcode·小程序·stl·visual studio
2501_915921431 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
李慕婉学姐1 天前
【开题答辩过程】以《自习室预约微信小程序》为例,不会开题答辩的可以进来看看
微信小程序·小程序
LB21121 天前
苍穹外卖-购物车 前端修改(小程序主页与购物车模块显示不一致)
小程序