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í)例對(duì)象:
因?yàn)槊總€(gè) vue 的組件實(shí)例上,都包含一個(gè) $refs 對(duì)象,里面存儲(chǔ)著對(duì)應(yīng)的 DOM 元素或組件的引用。所以在默認(rèn)情況下, 組件的 $refs 指向一個(gè)空對(duì)象 。
可以先在組件上加上 ref="名字" ,然后通過(guò) this.$refs.名字 獲取相應(yīng)元素并進(jìn)行操作。
<template> <div class="box"> <h1 ref="divDom">這是一個(gè)測(cè)試樣例</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ì)象,所以無(wú)法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點(diǎn)。
但是vue3中自帶了能返回當(dāng)前組件實(shí)例對(duì)象的函數(shù) getCurrentInstance,通過(guò)該函數(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) }) // 獲取頁(yè)面的實(shí)例對(duì)象 const pageInstance = getCurrentInstance(); // 獲取dom節(jié)點(diǎn)對(duì)象 const tagDomObj = pageInstance.refs.divDom; </script>
總結(jié)
到此這篇關(guān)于Vue3獲取DOM節(jié)點(diǎn)的3種方式的文章就介紹到這了,更多相關(guān)Vue3獲取DOM節(jié)點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 全局封裝loading加載教程(全局監(jiān)聽(tīng))
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽(tīng)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11利用Vue3和element-plus實(shí)現(xiàn)圖片上傳組件
element-plus提供了uploader組件,但是不好定制化。所以本文將利用Vue3和element-plus實(shí)現(xiàn)一個(gè)圖片上傳的組件,感興趣的可以了解一下2022-03-03vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng)
這篇文章主要介紹了在vue項(xiàng)目中如何獲取視頻的時(shí)長(zhǎng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04在vue項(xiàng)目中引入vue-beauty操作方法
在本篇文章里小編給大家分享了關(guān)于在vue項(xiàng)目中引入vue-beauty操作方法,有需要的朋友們跟著學(xué)習(xí)參考下。2019-02-02vue使用vant中的checkbox實(shí)現(xiàn)全選功能
這篇文章主要為大家詳細(xì)介紹了vue使用vant中的checkbox實(shí)現(xiàn)全選功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Vue利用Blob下載原生二進(jìn)制數(shù)組文件
這篇文章主要為大家詳細(xì)介紹了Vue利用Blob下載原生二進(jìn)制數(shù)組文件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-09-09nuxt.js添加環(huán)境變量,區(qū)分項(xiàng)目打包環(huán)境操作
這篇文章主要介紹了nuxt.js添加環(huán)境變量,區(qū)分項(xiàng)目打包環(huán)境操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11