在Vue3中,使用ref
获取DOM元素(比如组件中的某个元素)的方法与Vue2有所不同。在Vue2中,我们可以给这个元素添加一个ref
属性,并在组件中使用this.$refs
来访问这个属性。而在Vue3中,我们需要使用Vue3提供的ref
函数来创建一个响应式引用,然后将其作为元素的属性值传递。这样,我们才能在组件中使用ref
函数获取到这个元素的引用。
下面是一个示例代码:
<template>
<div ref="myDiv">Hello Vue</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const myDiv = ref(null)
onMounted(() => {
console.log(myDiv.value) // <div>Hello Vue</div>
})
return {
myDiv
}
}
}
</script>
在上面的代码中,我们首先在模板中使用了ref
,并将其设置为myDiv
,这样这个div的引用就被赋值给了myDiv
这个响应式引用。
接下来,在setup()
函数中,我们使用ref
函数创建一个名为myDiv
的响应式引用,并将其初始化为null
。然后,在onMounted
中,我们通过myDiv.value
的方式访问到了这个引用,从而获取到了这个div
元素。
需要注意的是,由于Vue3中的组件模型已经改变,我们无法在template
中直接访问到this.$refs
,而是需要在setup()
函数中使用ref
来创建响应式引用。同时,当我们使用ref
创建DOM元素的引用时,我们需要在模板中使用ref
将引用绑定到元素上。
使用Setup语法糖的形式获取Dom元素:
// 使用ref获取dom元素
const show = ref<null | HTMLElement>(null)
onMounted(() => {
console.log("show---", show.value);
})