vue中ref和e.target的區(qū)別以及ref用法
1、首先認(rèn)識一下ref
ref說白了就是標(biāo)識，獲取某一個(gè)標(biāo)簽的標(biāo)志。
為什么這么說呢？
<button ref="age" @click="getRefAge">ref的age形式</button>
getRefAge(e){
// 獲取的是button標(biāo)簽, ref是用來獲取標(biāo)簽的
console.log(this.$refs.age)
console.log(this.$refs.age === e.target) // true
console.log(this.$refs) // {age: button對象}
}
這個(gè)時(shí)候，可以看到給age是成為了這個(gè)button標(biāo)簽的標(biāo)識，用于尋找，獲取這個(gè)標(biāo)簽的標(biāo)識。
2、ref的有趣玩法
深入一下，防止迷糊
// 注意: 給ref是給其綁定了v-bind事件
<button :ref="age" @click="refDongTai">ref成了動(dòng)態(tài)的情況</button>
refDongTai(e){
console.log(e.target)
console.log(this.$refs[this.age]) // 可以訪問，但沒什么實(shí)質(zhì)性的用處
}
這個(gè)時(shí)候， age是一個(gè)變量，假設(shè)age的值是18，那么這個(gè)ref使用的是標(biāo)識是18這個(gè)數(shù)值
3、ref和e.target的區(qū)別
<button ref="age" @click="getRefAge">ref的age形式</button>
getRefAge(e){
console.log(this.$refs.age)
console.log(this.$refs.age === e.target) // true
}
可以看到都同樣可以獲取到標(biāo)簽，并且 e.target的用法還單詞比較少。
要想知道其區(qū)別，還需要打印一下，refs
getRefAge(e){
console.log(this.$refs) // {age: button標(biāo)簽}
}
現(xiàn)在就可以知道了，因?yàn)閞ef是保存在了this身上的，即vue的實(shí)例身上的，那么標(biāo)識了ref的，
可以在任意位置將標(biāo)簽取出來使用，而e.target,則僅限于觸發(fā)了這個(gè)標(biāo)簽事件的時(shí)候可以使用
說白了，就是this.$refs的作用范圍 > e.target。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中reactive函數(shù)toRef函數(shù)ref函數(shù)簡介
這篇文章主要介紹了Vue3中的三種函數(shù)，分別對reactive函數(shù)toRef函數(shù)以及ref函數(shù)原理及使用作了簡單介紹，有需要的朋友可以借鑒參考下2021-09-09
vue項(xiàng)目中vue.config.js文件詳解
vue.config.js?是一個(gè)可選的配置文件,如果項(xiàng)目的?(和?package.json?同級的)?根目錄中存在這個(gè)文件,那么它會(huì)被?@vue/cli-service?自動(dòng)加載,這篇文章主要介紹了vue項(xiàng)目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
Vue首頁界面加載優(yōu)化實(shí)現(xiàn)方法詳解
如果你也遇到在 vue 應(yīng)用中，首頁加載資源過多，導(dǎo)致加載緩慢的問題，下面的方法也許能幫到你，主要的處理思想是：讓首頁多余的資源能在需要它的時(shí)候再加載2022-09-09
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實(shí)現(xiàn)方案及區(qū)別對比分析,需要的朋友可以參考下2023-03-03
vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式
這篇文章主要介紹了vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
使用Vue-scroller頁面input框不能觸發(fā)滑動(dòng)的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動(dòng)的問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
vue3+TypeScript+vue-router的使用方法
本文詳細(xì)講解了vue3+TypeScript+vue-router的使用方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
今天將從 Vue 的入口文件開始，看看聲明了一個(gè) Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯(cuò)過奧2021-09-09
vue?Element?UI擴(kuò)展內(nèi)容過長使用tooltip顯示
這篇文章主要為大家介紹了vue?Element?UI擴(kuò)展內(nèi)容過長使用tooltip展示鼠標(biāo)hover時(shí)的提示信息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
這篇文章主要介紹了vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-09