Vue3中如何获取DOM节点信息_vue3获取dom节点

Vue3中无法使用this.$refs的方式获取ref的DOM实例

Vue3提供了getCurrentInstance函数，此函数能返回当前组件的实例对象，也就是当前vue这个实例对象。

通过打印getCurrentInstance获取的对象就可以看见此对象包含页面中的refs。

<script setup>
    // 引入函数
    import { getCurrentInstance } from 'vue';
    // 获取页面的实例对象
    const pageInstance = getCurrentInstance();
    // 获取dom节点对象
    const tagDomObj = pageInstance.refs.tagDom;

</script>

<template>
    <div ref="tagDom">
    
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

还有一点需要注意的是：无法通过ref的方式获取自定义组件的dom节点

转载请注明出处