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 节点的组件实例。
原文地址：https://blog.csdn.net/weixin_40323532/article/details/140323158
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！