在網上很多人說可以通過下面兩種形式獲取到指定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 節點的組件實例。