一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)
前言：
本文介紹在vue3的setup中使用composition API獲取元素節(jié)點(diǎn)的幾種方法：
靜態(tài)綁定
僅僅需要申明一個ref的引用，用來保存元素，在template中，不必bind引用(:ref="domRef")，只需要聲明一個同名的ref屬性(ref="domRef")即可。
<script?setup>
import?{?ref,?onMounted?}?from?'vue'
//?聲明一個ref引用，來保存元素
const?domRef?=?ref(null)
onMounted(()?=>?{
??domRef.value.style.background?=?"red"
})
</script>
<template>
??<!--?這里只需要同名即可?-->
??<button?ref="domRef">dom</button>
</template>需要注意的是，訪問的時候，要確保ref引用值已經(jīng)成功綁定上元素，我們可以使用以下幾種方式確保獲?。?/strong>
onMounted
onMounted(()?=>?{
??domRef.value.style.background?=?"red"
})nextTick
nextTick(()?=>?{
??domRef.value.style.background?=?"red"
})watchEffect
watchEffect(()?=>?{
???if?(domRef.value)?{
????????domRef.value.style.background?=?"red"
???}
})watch
watch(domRef,?(val)?=>?{
????domRef.value.style.background?=?"red"
})v-for中使用
在使用v-for進(jìn)行靜態(tài)綁定時，僅需要注意以下兩點(diǎn)：
- 要與
v-for在同級 ref是一個數(shù)組ref([])
<script?setup>
import?{?ref,?onMounted?}?from?'vue'
const?list?=?ref([
??/*?...?*/
])
const?itemRefs?=?ref([])
onMounted(()?=>?console.log(itemRefs.value))
</script>
<template>
??<ul>
????<li?v-for="item?in?list"?ref="itemRefs">
??????{{?item?}}
????</li>
??</ul>
</template>但需要注意的是，itemRefs元素數(shù)組并不保證與list數(shù)組為相同的順序。
動態(tài)綁定
動態(tài)綁定中，分為兩種方式，一種是通過將ref設(shè)置為函數(shù)，第二種則是通過getCurrentInstance方法訪問當(dāng)前組件實(shí)例上的$refs；
ref設(shè)置函數(shù)
<template>
????<button?:ref="handleRef">動態(tài)Ref</button>
</template>
<script?setup>
????import?{?shallowRef?}?from?'vue'
????
????const?btnRef?=?shallowRef(null)
????//?賦值動態(tài)ref到變量
????const?handleRef?=?el?=>?{
????????if?(el)?{
????????????btnRef.value?=?el
????????}
????}
</script>ref的函數(shù)回調(diào)中，我們能夠接受到元素返回值，再動態(tài)設(shè)置到響應(yīng)式變量即可；
當(dāng)然，通過設(shè)置函數(shù)回調(diào)的方式，我們也能非常靈活的進(jìn)行進(jìn)一步的封裝。
<template>
????<ul>
????????<li?v-for="item?in?list"?:key="item.id"?:ref="(el)?=>?handleLiRef(el,?item)">
????????????<button>{{?item.id?}}</button>
????????</li>
????</ul>
</template>
<script?setup>
????import?{?ref?}?from?"vue"
????const?list?=?ref([{?id:?"111"?},?{?id:?"222"?},?{?id:?"333"?}])
????const?handleLiRef?=?(el,?item)?=>?{
????????console.log(el,?item)
????}
</script>通過getCurrentInstance方法
<template>
????<ul>
????????<li?v-for="item?in?list"?:key="item.id"?:ref="item.id">
????????????<button>{{?item.id?}}</button>
????????</li>
????</ul>
</template>
<script?setup>
????import?{?getCurrentInstance,?onMounted,?ref?}?from?"vue"
????const?{?proxy?}?=?getCurrentInstance()
????const?list?=?ref([{?id:?"111"?},?{?id:?"222"?},?{?id:?"333"?}])
????onMounted(()?=>?{
????????console.log(proxy.$refs["111"])
????})
</script>這種方式，與vue2的this.$refs一般無二，只是我們用了getCurrentInstance函數(shù)在setup中獲取了當(dāng)前組件實(shí)例以替代this。
獲取vue實(shí)例
需要注意的是，無論通過以上哪種方式獲取元素，如果元素為vue組件，則需要在子組件中使用defineExpose進(jìn)行暴露。
在父組件中，我們靜態(tài)綁定childRef。
<template>
????<Test?ref="childRef"></Test>
</template>
<script?setup?lang="ts">
????import?Test?from?"./components/test.vue"
????import?{?onMounted,?ref?}?from?"vue"
????const?childRef?=?ref(null)
????onMounted(()?=>?{
????????console.log(childRef.value.btnRef)
????})
</script>在子組件中，我們需要通過defineExpose函數(shù)，手動暴露出來ref引用值，該值指向了button元素。
<template> ????<button?ref="btnRef">子組件</button> </template>
<script?setup>
????import?{?ref?}?from?"vue"
????const?btnRef?=?ref(null)
????defineExpose({
????????btnRef
????})
</script>到此這篇關(guān)于一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)的文章就介紹到這了,更多相關(guān)Vue3 ref 獲取元素節(jié)點(diǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue+element-ui添加自定義右鍵菜單的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
詳解Vue中數(shù)據(jù)可視化詞云展示與詞云的生成
數(shù)據(jù)可視化是現(xiàn)代Web應(yīng)用程序中的一個重要組成部分，詞云是一種非常流行的數(shù)據(jù)可視化形式，可以用來展示文本數(shù)據(jù)中的主題和關(guān)鍵字，本文我們將介紹如何在Vue中使用詞云庫進(jìn)行數(shù)據(jù)可視化詞云展示和詞云生成，需要的可以參考一下2023-06-06
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js刪除動態(tài)綁定的radio的指定項(xiàng)
這篇文章主要介紹了vue.js刪除動態(tài)綁定的radio的指定項(xiàng),需要的朋友可以參考下2017-06-06
el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下2023-11-11
ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefin
這篇文章主要介紹了ant?菜單組件報錯Cannot?read?property?‘isRootMenu‘?of?undefined解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue3 + ElementPlus動態(tài)合并數(shù)據(jù)相同的單元格的完整代碼
文章介紹了如何使用ElementPlus的Table組件動態(tài)合并單元格,適用于后臺數(shù)據(jù)返回格式動態(tài)且沒有規(guī)律的場景,包括數(shù)據(jù)處理和按鈕操作,文章還附帶了效果圖和代碼詳解,希望能對大家有所幫助,感興趣的朋友跟隨小編一起看看吧2025-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
本文介紹了如何使用html2canvas庫來實(shí)現(xiàn)HTML頁面或某個元素的截圖功能,文中通過代碼介紹的非常詳細(xì),需要注意的是此方法只能在瀏覽器環(huán)境中使用,需要的朋友可以參考下2024-10-10