Vue2和Vue3在v-for遍歷時(shí)ref獲取dom節(jié)點(diǎn)的區(qū)別及說(shuō)明
Vue 2
在 vue 2 中，如果給 v-for 綁定一個(gè) ref ，通過(guò)這個(gè) ref 可以獲取到全部 v-for 的節(jié)點(diǎn)。
HTML
<div id='app'>
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
</div>
JS
data() {
return {
renderData: [
{ name: 'a' },
{ name: 'b' },
{ name: 'c' },
{ name: 'd' },
{ name: 'f' }
]
}
},
mounted() {
console.log(this.$refs.nodes)
}
從而可以獲得所有 v-for 的節(jié)點(diǎn)數(shù)組：
所以你可以在自定義觸發(fā)事件中將索引傳入，就可以在 this.$refs.nodes[index] 中獲取觸發(fā)事件的那個(gè) dom 。
Vue 3
在 vue 3 中，對(duì) v-for 的一體化（數(shù)組化）處理已經(jīng)取消，變?yōu)楹瘮?shù)處理 ref 。
如果你像 vue 2 中綁定：
<div>
<p v-for="item in renderData" :key="item.name" ref="nodes">{{item.name}}</p>
</div>
此時(shí)通過(guò) this.$refs.nodes 只能獲取遍歷的最后一個(gè)節(jié)點(diǎn) dom 。
如果要實(shí)現(xiàn) vue 2 相同的數(shù)組，你可以對(duì) ref 進(jìn)行自定義處理：
HTML
<div>
<p v-for="item in renderData" :key="item.name" ref="handleNodes">{{item.name}}</p>
</div>
JS
data() {
return {
nodes: []
}
},
methods: {
handleNodes(el) {
this.nodes.push(el)
}
}
也就是說(shuō) ref 的處理方式變?yōu)榱撕瘮?shù)，這個(gè)函數(shù)默認(rèn)傳入該節(jié)點(diǎn)。
當(dāng)然，如果你不在 v-for 上使用，只是單純的加入單個(gè) ref ，使用方法和 vue 2 沒(méi)有任何區(qū)別。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了vue2和vue3實(shí)現(xiàn)圖片懶加載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
vue quill editor 使用富文本添加上傳音頻功能
vue-quill-editor 是vue項(xiàng)目中常用的富文本插件，其功能能滿足大部分的項(xiàng)目需求。這篇文章主要介紹了vue-quill-editor 富文本添加上傳音頻功能,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明
這篇文章主要介紹了前端token中4個(gè)存儲(chǔ)位置的優(yōu)缺點(diǎn)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
為了防止用戶在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請(qǐng)求，重復(fù)發(fā)送多次請(qǐng)求，本文主要介紹了Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法，感興趣的可以了解一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖
今天小編就為大家分享一篇在vue+element ui框架里實(shí)現(xiàn)lodash的debounce防抖，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11