<template>
<div ref="root" class="root">VUE3 如何获取dom元素</div>
</template>
<script>
import { ref, onMounted, getCurrentInstance } from 'vue';
export default {
setup() {
const { proxy } = getCurrentInstance();
const root = ref(null);
onMounted(() => {
// DOM元素将在初始渲染后分配给ref
//第一种
console.log(root.value);
//第二种
console.log(proxy.root);
//第三种
console.log(document.querySelector('.root'))
});
return {
root
};
}
};
</script>
相关链接:vue3 ref
扩展:
问:vue3中如何获取dom 宽度?
答:
在Vue 3中,可以使用ref来引用DOM元素,然后使用==$el==属性来访问DOM元素的属性,包括宽度。
<template>
<div ref="myDiv">Hello World</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const myDiv = ref(null);
onMounted(() => {
const width = myDiv.value.$el.clientWidth;
console.log('Width:', width);
});
return {
myDiv,
};
},
};
</script>