Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例
1 .原生js獲取 DOM 節(jié)點(diǎn)：
document.querySelector(選擇器) document.getElementById(id選擇器) document.getElementsByClassName(class選擇器) ....
2. vue2中獲取當(dāng)前組件的實(shí)例對象：
因?yàn)槊總€(gè) vue 的組件實(shí)例上，都包含一個(gè) $refs 對象，里面存儲著對應(yīng)的 DOM 元素或組件的引用。所以在默認(rèn)情況下， 組件的 $refs 指向一個(gè)空對象 。
可以先在組件上加上 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í)例對象
console.log(this);
this.$refs.divDom.style.color='yellow'
//引用到組件的實(shí)例之后，也可以調(diào)用組件上的 methods方法
this.$refs.but.click();
},
},
}
</script>3.vue3中獲取當(dāng)前組件的實(shí)例對象：
在Vue3框架里面是解除了this這個(gè)對象，所以無法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點(diǎn)。
但是vue3中自帶了能返回當(dāng)前組件實(shí)例對象的函數(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)
})
// 獲取頁面的實(shí)例對象
const pageInstance = getCurrentInstance();
// 獲取dom節(jié)點(diǎn)對象
const tagDomObj = pageInstance.refs.divDom;
</script>總結(jié)
到此這篇關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式的文章就介紹到這了,更多相關(guān)Vue3獲取DOM節(jié)點(diǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Electron 如何調(diào)用本地模塊的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要給大家介紹了關(guān)于Vue獲取表單數(shù)據(jù)的多種方式,在Vue中我們通常使用v-model命令綁定表單的屬性值(通常是value),獲取到的屬性值就是表單數(shù)據(jù),需要的朋友可以參考下2023-09-09
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能(刷新保持狀態(tài))
倒計(jì)時(shí)的運(yùn)用場景是需要經(jīng)常用到的，但是根據(jù)業(yè)務(wù)的不同，好比手機(jī)驗(yàn)證碼或者是郵箱驗(yàn)證碼之類的，即使用戶跳轉(zhuǎn)到其它頁面或者刷新，再次回到登錄也，驗(yàn)證碼的倒計(jì)時(shí)也得保持狀態(tài),下面通過本文給大家分享Vue3?驗(yàn)證碼倒計(jì)時(shí)功能實(shí)現(xiàn)，感興趣的朋友一起看看吧2022-08-08
解決vue前端文件上傳報(bào)錯(cuò):上傳失敗,原因:413 Request Entity Too&
這篇文章主要介紹了解決vue前端文件上傳報(bào)錯(cuò):上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
我們在使用element-ui的時(shí)候經(jīng)常會遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(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í)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了VUE子組件的watch不被觸發(fā)問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue css 引入asstes中的圖片無法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題
這篇文章主要介紹了如何解決模塊““vue“”沒有導(dǎo)出的成員“ref”問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript構(gòu)建Vue應(yīng)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08