在 vue2 中,我們通過 ref 為節(jié)點(diǎn)添加一個(gè)名稱,然后用 this.$refs['節(jié)點(diǎn)名稱'] 就可以獲取到DOM節(jié)點(diǎn),
例:
<template>
<div ref='one'>我是節(jié)點(diǎn)</div> // 添加名稱
</template>
<script>
mounted() {
console.log(this.$refs.one) // 獲取到 one DOM 節(jié)點(diǎn)
}
</script>
在 vue3 中,我們一樣可以通過為節(jié)點(diǎn)添加一個(gè) ref 名稱 ,但是接下來的步驟和 vue2 有些區(qū)別
1.為節(jié)點(diǎn)添加一個(gè) ref 名稱
2.創(chuàng)建 ref 響應(yīng)式常量并且與 DOM 節(jié)點(diǎn)名稱一致 ,且值為 null
3.在 mounted 之后通過 常量的 value 即可獲取到 DOM 節(jié)點(diǎn)
例:
<template>
<div ref="two">我是節(jié)點(diǎn)</div>
</template>
<script>
setup() {
const two= ref(null)
onMounted(() => { // 需要在DOM加載完畢之后才可獲取到
console.log(two.value)
})
return { two }
},
</script>
OK,今天就寫這么多~!