vue3 使用ref获取Dom元素

vue3 中文文档 

记录一下自己获取dom的一些用法

一 .  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

 <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>

　　

这样就可以进行dom操作了，有不对的地方欢迎大家指正吖

posted @ 2020-10-05 11:26  StableLove  阅读(4510)  评论(0)  编辑  收藏  举报