vue3 使用ref获取Dom元素

本文为搬运学习,感谢原文大佬，原文地址:https://www.cnblogs.com/YUE-Blogs/p/13769618.html

一 .  vue2.x 获取dom

复制代码

1 <div ref="dom"></div>
2 this.$refs.dom

二. vue3.x 获取dom

(1) 使用 setRef

如果是循环的多个dom 可以定义为数组 push添加

复制代码

 1 <template>
 2   <div :ref="dom">DOM元素</div>
 3 </template>
 4 
 5 <script lang="ts" >
 6 import { nextTick } from 'vue';
 7 export default {
 8   setup() {
 9     const refs: HTMLElement = '';
10 　　
11     const dom = (el:HTMLElement) => {
12       refs= el;
13     }
14 
15     nextTick(() => {
16       console.log(refs);
17     })
18     return {
19       dom
20     };
21   }
22 };
23 </script>

(2) 通过ref 获取dom

复制代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>   <div :ref="refs">DOM元素</div> </template> <script> import { nextTick ，ref} from 'vue'; export default {   setup() {     let refs = ref(null);     nextTick(() => {       console.log(refs);     })     return {       refs     };   } }; </script>

本文原作者：StableLove

本文链接：https://www.cnblogs.com/YUE-Blogs/p/13769618.html