Vue3獲取DOM節(jié)點的3種方式實例
1 .原生js獲取 DOM 節(jié)點:
document.querySelector(選擇器) document.getElementById(id選擇器) document.getElementsByClassName(class選擇器) ....
2. vue2中獲取當前組件的實例對象:
因為每個 vue 的組件實例上,都包含一個 $refs 對象,里面存儲著對應的 DOM 元素或組件的引用。所以在默認情況下, 組件的 $refs 指向一個空對象 。
可以先在組件上加上 ref="名字" ,然后通過 this.$refs.名字 獲取相應元素并進行操作。
<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' //引用到組件的實例之后,也可以調用組件上的 methods方法 this.$refs.but.click(); }, }, } </script>
3.vue3中獲取當前組件的實例對象:
在Vue3框架里面是解除了this這個對象,所以無法使用this.$refs的方式獲取自定義組件 ref 的DOM節(jié)點。
但是vue3中自帶了能返回當前組件實例對象的函數(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>
總結
到此這篇關于Vue3獲取DOM節(jié)點的3種方式的文章就介紹到這了,更多相關Vue3獲取DOM節(jié)點內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue 全局封裝loading加載教程(全局監(jiān)聽)
這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11利用Vue3和element-plus實現(xiàn)圖片上傳組件
element-plus提供了uploader組件,但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件,感興趣的可以了解一下2022-03-03vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02vue使用vant中的checkbox實現(xiàn)全選功能
這篇文章主要為大家詳細介紹了vue使用vant中的checkbox實現(xiàn)全選功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-11-11nuxt.js添加環(huán)境變量,區(qū)分項目打包環(huán)境操作
這篇文章主要介紹了nuxt.js添加環(huán)境變量,區(qū)分項目打包環(huán)境操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11