vue3 使用ref獲取Dom元素

vue3 中文文檔 

記錄一下自己獲取dom的一些用法

一 .  vue2.x 獲取dom

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

二. vue3.x 獲取dom

(1) 使用 setRef

如果是循環的多個dom 可以定義為數組 push添加

<template>
  <div :ref="dom">DOM元素</div>
</template>

<script lang="ts" >
import { nextTick } from 'vue';
export default {
  setup() {
    const refs: HTMLElement = '';
　　
    const dom = (el:HTMLElement) => {
      refs= el;
    }

    nextTick(() => {
      console.log(refs);
    })
    return {
      dom
    };
  }
};
</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操作了，有不對的地方歡迎大家指正吖