快捷導(dǎo)航

一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)

更新時(shí)間：2022年07月27日 09:47:51 作者：??油箱上的蔥花?

這篇文章主要介紹了一文詳解Vue3中使用ref獲取元素節(jié)點(diǎn)，本文介紹在vue3的setup中使用composition?API獲取元素節(jié)點(diǎn)的幾種方法，需要的朋友可以參考一下

靜態(tài)綁定

僅僅需要申明一個(gè)ref的引用，用來(lái)保存元素，在template中，不必bind引用(:ref="domRef")，只需要聲明一個(gè)同名的ref屬性(ref="domRef")即可。

<script?setup>
import?{?ref,?onMounted?}?from?'vue'

//?聲明一個(gè)ref引用，來(lái)保存元素
const?domRef?=?ref(null)

onMounted(()?=>?{
??domRef.value.style.background?=?"red"
})
</script>

<template>
??<!--?這里只需要同名即可?-->
??<button?ref="domRef">dom</button>
</template>

需要注意的是，訪問(wèn)的時(shí)候，要確保ref引用值已經(jīng)成功綁定上元素，我們可以使用以下幾種方式確保獲取：

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)綁定時(shí)，僅需要注意以下兩點(diǎn)：

要與v-for在同級(jí)
ref是一個(gè)數(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元素?cái)?shù)組并不保證與list數(shù)組為相同的順序。

動(dòng)態(tài)綁定

動(dòng)態(tài)綁定中，分為兩種方式，一種是通過(guò)將ref設(shè)置為函數(shù)，第二種則是通過(guò)getCurrentInstance方法訪問(wèn)當(dāng)前組件實(shí)例上的$refs；

ref設(shè)置函數(shù)

<template>
????<button?:ref="handleRef">動(dòng)態(tài)Ref</button>
</template>
<script?setup>
????import?{?shallowRef?}?from?'vue'
????
????const?btnRef?=?shallowRef(null)
????//?賦值動(dòng)態(tài)ref到變量
????const?handleRef?=?el?=>?{
????????if?(el)?{
????????????btnRef.value?=?el
????????}
????}
</script>

ref的函數(shù)回調(diào)中，我們能夠接受到元素返回值，再動(dòng)態(tài)設(shè)置到響應(yīng)式變量即可；

當(dāng)然，通過(guò)設(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>

通過(guò)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一般無(wú)二，只是我們用了getCurrentInstance函數(shù)在setup中獲取了當(dāng)前組件實(shí)例以替代this。

獲取vue實(shí)例

需要注意的是，無(wú)論通過(guò)以上哪種方式獲取元素，如果元素為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>

在子組件中，我們需要通過(guò)defineExpose函數(shù)，手動(dòng)暴露出來(lái)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: