Vue3獲取DOM節(jié)點的3種方式實例

更新時間：2023年02月23日 08:53:52 作者：小花睡不醒

Vue本來無需操作DOM來更新界面,而且Vue也不推薦我們直接操作DOM,但是我們非要拿到DOM操作DOM怎么辦,下面這篇文章主要給大家介紹了關(guān)于Vue3獲取DOM節(jié)點的3種方式,需要的朋友可以參考下

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

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

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

因為每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應(yīng)的 DOM 元素或組件的引用。所以在默認(rèn)情況下，組件的 $refs 指向一個空對象。

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

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

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

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

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

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

總結(jié)

到此這篇關(guān)于Vue3獲取DOM節(jié)點的3種方式的文章就介紹到這了,更多相關(guān)Vue3獲取DOM節(jié)點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Electron 如何調(diào)用本地模塊的方法
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
Vue獲取表單數(shù)據(jù)的多種方式
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下
2023-09-09
Vue3?實現(xiàn)驗證碼倒計時功能(刷新保持狀態(tài))
倒計時的運用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機驗證碼或者是郵箱驗證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗證碼的倒計時也得保持狀態(tài),下面通過本文給大家分享Vue3?驗證碼倒計時功能實現(xiàn)，感興趣的朋友一起看看吧
2022-08-08
解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08
element-ui中樣式覆蓋問題的方法總結(jié)
我們在使用element-ui的時候經(jīng)常會遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
el-date-picker設(shè)置日期默認(rèn)值兩種方法(當(dāng)月月初至月末)
這篇文章主要給大家介紹了關(guān)于el-date-picker設(shè)置日期默認(rèn)值(當(dāng)月月初至月末)的相關(guān)資料,文中通過代碼示例將解決的辦法介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
VUE子組件的watch不被觸發(fā)問題及解決
這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-03-03
如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題
這篇文章主要介紹了如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
使用typescript構(gòu)建Vue應(yīng)用的實現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應(yīng)用的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08