vue3获取dom元素的办法

一、vue2中获取dom

首先给dom元素用ref=""命名

然后使用this.$ref.命名即可

 

一、vue3中获取dom

首先给dom元素用ref=""命名

然后声明在setup中一个响应式变量，这个变量的名字要和ref命名一致，最后返回这个变量

重要：要想获取这个dom必须在onMounted中，因为setup替代了原来的created

<template>
  <div class="logo" ref="loginRef">者也</div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, onMounted } from 'vue'
export default defineComponent({
  name: 'GlobalHeader',
  setup () {
    const loginRef = ref<null | HTMLElement>(null)
    const handleMenuClick = function () {
      console.log(loginRef.value)
    }
    onMounted(() => {
      console.log(loginRef.value)
    })
    return {
      loginRef
    }
  }
})
</script>