vue2.0/3.0 使用ref获取dom元素

最新推荐文章于 2025-04-21 17:32:08 发布

小粗腿Cc

最新推荐文章于 2025-04-21 17:32:08 发布

阅读量2.1k

点赞数 1

文章标签： vscode 前端 javascript vue.js vue

本文链接：https://blog.youkuaiyun.com/weixin_45249263/article/details/124191562

版权

这篇博客介绍了Vue2.0和Vue3.0中如何使用ref来获取DOM元素的区别。在Vue2中，我们通过`this.$refs`在`mounted`生命周期钩子中获取；而在Vue3中，由于移除了`this`，我们可以使用`ref`和`onMounted`，在setup函数内通过`ref.value`来获取。示例代码展示了两种版本的不同实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.0 用ref获取DOM元素的：

<template>
	<div class="box">
		<div ref="drag" class="box_drag">我会被拖动</div>
	</div>
</template>

<script>
	export default {
		mounted() {
			console.log(this.$refs.drag)
		}
	}
</script>

vue3.0 用ref获取DOM元素：

由于vue3.0中没有this和$refs，则在vue2中使用$refs来获取dom元素的方法在vue3行不通

所以在vue3就可以使用以下方法：

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.dir(myRef.value);
    });
    return {
      myRef
    };
  }
};
</script>

或者：

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

<script setup>
    import { ref, onMounted } from 'vue'
    
    const myRef = ref(null)

    function test(){
        console.log(myRef)
    }   

    onMounted(()=>{
        console.log(myRef)  // 直接输出myRef

        test()  // 在onMounted中调用函数来输出myRef，效果一样
    })

    // 注：这里不用 return 了
</script>

当然，大家可以去vue官方文档了解更详细的内容：

Vue官方文档——ref