快捷導(dǎo)航

Vue3獲取元素DOM的兩種方法

更新時(shí)間：2024年04月22日 08:22:19 作者：Carlos_sam

Vue3 DOM是Vue.js框架的一部分，用于處理與瀏覽器DOM相關(guān)的操作，它提供了一組API和工具，使開發(fā)者能夠輕松地操作和管理DOM元素，本文給大家介紹了Vue3獲取元素DOM的兩種方法：ref模板引用和傳統(tǒng)方法，并有詳細(xì)的代碼示例,需要的朋友可以參考下

1.ref模板引用

模板引用是官方提出的方法，請(qǐng)看下面的例子：

<template>
    <canvas ref="solarCanvas" id="solar" width="1300" height="900"></canvas>
</template>

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

const solarCanvas = ref(null)
onMounted(() => {
  console.log(solarCanvas.value)//HTMLCanvasElement{...}
})
</script>

這里要注意的是只可以在組件掛載后才能訪問模板引用，上面的例子中onMounted執(zhí)行時(shí)組件已經(jīng)掛載了 , 所以打印solarCanvas有值。

<template>
    <canvas ref="solarCanvas" id="solar" width="1300" height="900"></canvas>
</template>

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

const solarCanvas = ref(null)
console.log(solarCanvas.value)//null
</script>

反之，如果這樣寫打印出來的值就為null，因?yàn)榇藭r(shí)組件還沒有掛載完成。

2.傳統(tǒng)方法

傳統(tǒng)方法就是指使用JS原生的獲取dom的方法，如：getElementById、querySelector等。請(qǐng)看下面的例子：

<template>
    <canvas id="solar" width="1300" height="900"></canvas>
</template>

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

onMounted(() => {
  const canvas = document.getElementById('solar')
  console.log(canvas)//HTMLCanvasElement{...}
})
</script>

拓展：Vue3獲取DOM節(jié)點(diǎn)的幾種方式

1 .原生js獲取 DOM 節(jié)點(diǎn)：

document.querySelector(選擇器)
document.getElementById(id選擇器)
document.getElementsByClassName(class選擇器)
....

2. vue2中獲取當(dāng)前組件的實(shí)例對(duì)象：

因?yàn)槊總€(gè) vue 的組件實(shí)例上，都包含一個(gè) $refs 對(duì)象，里面存儲(chǔ)著對(duì)應(yīng)的 DOM 元素或組件的引用。所以在默認(rèn)情況下，組件的 $refs 指向一個(gè)空對(duì)象。

可以先在組件上加上 ref="名字" ，然后通過 this.$refs.名字獲取相應(yīng)元素并進(jìn)行操作。

<template>
  <div class="box">
    <h1 ref="divDom">這是一個(gè)測試樣例</h1>
    <button ref="but">按鈕</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h1的實(shí)例對(duì)象 
      console.log(this);
      this.$refs.divDom.style.color='yellow'
      //引用到組件的實(shí)例之后，也可以調(diào)用組件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>

3.vue3中獲取當(dāng)前組件的實(shí)例對(duì)象：

在Vue3框架里面是解除了this這個(gè)對(duì)象，所以無法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點(diǎn)。

但是vue3中自帶了能返回當(dāng)前組件實(shí)例對(duì)象的函數(shù) getCurrentInstance，通過該函數(shù)獲取對(duì)象節(jié)能看到該對(duì)象包含界面中的refs。

<template>
    <div ref="divDom"></div>
</template>
 
<script setup>
    import { ref, getCurrentInstance } from 'vue';
    
    const divDom = ref(null);
    onMounted(()=>{
        console.log('獲取dom元素',divDom)
    })
 
    // 獲取頁面的實(shí)例對(duì)象
    const pageInstance = getCurrentInstance();
    // 獲取dom節(jié)點(diǎn)對(duì)象
    const tagDomObj = pageInstance.refs.divDom;
 
</script>