在 vue2 中,我们通过 ref 为节点添加一个名称,然后用 this.$refs['节点名称'] 就可以获取到DOM节点,
例:
<template>
<div ref='one'>我是节点</div> // 添加名称
</template>
<script>
mounted() {
console.log(this.$refs.one) // 获取到 one DOM 节点
}
</script>
在 vue3 中,我们一样可以通过为节点添加一个 ref 名称 ,但是接下来的步骤和 vue2 有些区别
1.为节点添加一个 ref 名称
2.创建 ref 响应式常量并且与 DOM 节点名称一致 ,且值为 null
3.在 mounted 之后通过 常量的 value 即可获取到 DOM 节点
例:
<template>
<div ref="two">我是节点</div>
</template>
<script>
setup() {
const two= ref(null)
onMounted(() => { // 需要在DOM加载完毕之后才可获取到
console.log(two.value)
})
return { two }
},
</script>
OK,今天就写这么多~!