vue中ref和e.target的區(qū)別以及ref用法
更新時間：2024年03月24日 09:07:07 作者：應該少了點什么
這篇文章主要介紹了vue中ref和e.target的區(qū)別以及ref用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
1、首先認識一下ref
ref說白了就是標識，獲取某一個標簽的標志。
為什么這么說呢？
<button ref="age" @click="getRefAge">ref的age形式</button>
getRefAge(e){
// 獲取的是button標簽, ref是用來獲取標簽的
console.log(this.$refs.age)
console.log(this.$refs.age === e.target) // true
console.log(this.$refs) // {age: button對象}
}
這個時候，可以看到給age是成為了這個button標簽的標識，用于尋找，獲取這個標簽的標識。
2、ref的有趣玩法
深入一下，防止迷糊
// 注意: 給ref是給其綁定了v-bind事件
<button :ref="age" @click="refDongTai">ref成了動態(tài)的情況</button>
refDongTai(e){
console.log(e.target)
console.log(this.$refs[this.age]) // 可以訪問，但沒什么實質性的用處
}
這個時候， age是一個變量，假設age的值是18，那么這個ref使用的是標識是18這個數(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
}
可以看到都同樣可以獲取到標簽，并且 e.target的用法還單詞比較少。
要想知道其區(qū)別，還需要打印一下，refs
getRefAge(e){
console.log(this.$refs) // {age: button標簽}
}
現(xiàn)在就可以知道了，因為ref是保存在了this身上的，即vue的實例身上的，那么標識了ref的，
可以在任意位置將標簽取出來使用，而e.target,則僅限于觸發(fā)了這個標簽事件的時候可以使用
說白了，就是this.$refs的作用范圍 > e.target。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue踩坑記錄之src的動態(tài)綁定賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)
下面小編就為大家分享一篇改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別
這篇文章主要介紹了詳解VUE自定義組件中用.sync修飾符與v-model的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家介紹了vite插件打包更順暢的使用技巧示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue監(jiān)聽dom大小改變案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue使用rem實現(xiàn) 移動端屏幕適配的相關知識，通過實例代碼介紹了vue用rem布局的實現(xiàn)代碼,需要的朋友可以參考下2018-09-09
市面上大多數(shù)關于Vue.js自定義指令的文章都在講語法,很少講實際的應用場景和用例,下面這篇文章主要給大家介紹了關于vue自定義封裝指令以及實際使用的相關資料,需要的朋友可以參考下2022-01-01
vue3使用el-table實現(xiàn)新舊數(shù)據(jù)對比的代碼詳解
這篇文章主要為大家詳細介紹了在vue3中使用el-table實現(xiàn)新舊數(shù)據(jù)對比,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以參考一下2023-12-12
Uniapp 實現(xiàn)頂部標簽頁切換功能(詳細步驟)
本文介紹了如何在UniApp中實現(xiàn)頂部標簽頁切換功能,u-tab-bar組件提供了便捷的標簽切換功能和豐富的樣式選項,而swiper組件則更加靈活,支持自定義切換方式,根據(jù)自己的需求選擇合適的方式實現(xiàn)頂部標簽頁切換,感興趣的朋友一起看看吧2025-02-02
在Vue前端項目中,可通過axios庫發(fā)送請求至后端獲取Excel下載鏈接,文中通過代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-10-10