Vue獲取DOM的幾種方法總結(jié)

更新時間：2022年10月13日 10:57:04 作者：燕穗子博客

這篇文章主要介紹了Vue獲取DOM的幾種方法總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue獲取DOM的方法

Vue實現(xiàn)了MVVM模型，將數(shù)據(jù)和表現(xiàn)進行了分離，我們只需要更新數(shù)據(jù)就能使DOM同步更新，但是某些情況下，還是需要獲取DOM元素進行操作

本文主要介紹幾種在Vue中獲取DOM元素的方法

1、使用DOM API直接找元素

<script>
?? ?...
?? ?mounted () {
?? ??? ?let elm = this.$el.querySelector('#id')
?? ?}
</script>

Vue組件在patch階段結(jié)束時會把this.$el賦值為掛載的根dom元素，我們可以直接使用$el的querySelector, querySelectorAll等方法獲取匹配的元素。

2、refs

<template>
?? ?<div ref="bar">{{ foo }}</div>
?? ?<MyAvatar ref="avatar" />
?? ?...
</template>
<script>
?? ?...
?? ?mounted () {
?? ??? ?let foo = this.$refs['bar'] // 一個dom元素
?? ??? ?let avatar = this.$refs['avatar'] // 一個組件實例對象
?? ?}
</script>

使用組件實例的$refs即可拿到組件上ref屬性對應(yīng)的元素。

如果ref屬性加在一個組件上，那么拿到的是這個組件的實例，否則拿到的就是dom元素了。

3、使用自定義指令

Vue提供了自定義指令，官方文檔給出了如下的使用方法，其中el就是dom元素的引用

Vue.directive('focus', {
? // 當(dāng)被綁定的元素插入到 DOM 中時……
? inserted: function (el) {
? ? // 聚焦元素
? ? el.focus()
? }
})
?
// 在模板中
<template>
?? ?<input v-model="name" v-focus />
</template>

vue3.0獲取虛擬dom方法

最近使用vue3.0+vue-router4.x+element-plus ui框架聯(lián)合開發(fā)了一個小的商城項目，首先簡單說一下element-plus ui框架。

官網(wǎng)上介紹了element-plus ui框架適用于vue3.0開發(fā)pc端，使用時發(fā)現(xiàn)只是框架部分代碼可以拿來直接使用，但是其余的代碼還沒有更新

下面總結(jié)vue3.0遇到的一些問題，老生長談的就是虛擬dom的獲取相對于vue2.x來說很是有點麻煩的，在vue2.x里面，我們只需在標(biāo)簽行內(nèi)添加ref屬性并賦值，那么我們就可以拿到這個dom節(jié)點，通過this.$refs.xxx即可拿到dom node

但是在vue3.0框架里面是解除了this這個對象，所以我們不能在使用this.$refs來獲取dom，那么我們怎樣才能拿到dom節(jié)點呢？請看下面的代碼(請不要忘記像vue2.x那樣在需要獲取dom的標(biāo)簽上添加ref屬性并賦值)

下面是傳統(tǒng)組合式api獲取虛擬dom方法：

<template>
? ? <div>
? ? ? ? <div class="box" ref="goodInfo"></div>
? ? </div>
</template>
<script>
import { onMounted, ref, reactive,nextTick } from 'vue'
export default{
?
? ? setup(){
? ? //獲取dom
? ? let goodInfo=ref(null)
? ? // 狗子函數(shù)mounted
? ? onMounted(()=>{
? ? ? GetGoodDetail()
? ? ? console.log(goodInfo,'獲取dom節(jié)點');
? ? ? console.log(goodInfo.value,'獲取該dom節(jié)點的值');
? ? ? console.log(goodInfo.value.offsetHeight,'獲取該dom節(jié)點的高度');
? ? })
? ? return {
? ? ? // dom對象
? ? ? goodInfo
? ? ? }
? }
?
}
</script>

補充一下：我們要通過ref這個vue3.0內(nèi)置的方法向變量注入一個值，然后在鉤子函數(shù)onMounted中獲取我們想要得到的dom節(jié)點上的值，設(shè)置簡單變量的值用ref,取值要用value來取，也就是上面代碼顯示的要得到該dom的高度我們要使用goodInfo.value.offsetHeight即可，

注意：不要忘記把獲取dom節(jié)點變量丟出來o，否則會報錯，因為我們傳給goodInfo變量的值是null,而null是沒有value的,

接下來介紹另外一種方式獲取dom，語法糖：<script setup> 獲取dom ，請看代碼：

<template>
? ? <div class="container" v-wechat-title="$route.meta.title">
? ? ? ??
? ? <div class="tree_box">
? ? ? ? <el-tree accordion ref="treeRef" :data="myData.treeData" :props="treeProps" :current-node-key="myData.curId" node-key="id" @node-click="methods.handleNodeClick"
? ? ? ? ? ? highlight-current />
? ? </div>
</div>
</template>
?
<script setup>
?
import { ref,reactive, onMounted,nextTick } from 'vue';
//創(chuàng)建變量treeRef并賦值，同時html模板<el-tree ref="treeRef" />上的ref=treeRef,這樣才可以獲取到該dom節(jié)點。獲取dom節(jié)點還是要treeRef.value才可以
let treeRef=ref(null)
?
const myData=reactive({
? ? curId:''
})
//配置el-tree--props
const treeProps = {
? ? children: 'children',
? ? label: 'title',
? ? value:'id',
}
onMounted(() => {
? ? //默認(rèn)展開el-tree指定的節(jié)點
? ? nextTick(() => {
? ? ? ?myData.curId=3
? ? ? ?treeRef.value.setCurrentKey(myData.curId)
? ? })
})
?
</script>

總結(jié)一下：vue3.x 語法糖方式獲取dom

首先：創(chuàng)建變量treeRef并賦值