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]) // 可以訪問，但沒什么實質(zhì)性的用處
}
這個時候， age是一個變量，假設(shè)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。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中reactive函數(shù)toRef函數(shù)ref函數(shù)簡介
這篇文章主要介紹了Vue3中的三種函數(shù)，分別對reactive函數(shù)toRef函數(shù)以及ref函數(shù)原理及使用作了簡單介紹，有需要的朋友可以借鑒參考下2021-09-09
vue.config.js?是一個可選的配置文件,如果項目的?(和?package.json?同級的)?根目錄中存在這個文件,那么它會被?@vue/cli-service?自動加載,這篇文章主要介紹了vue項目中vue.config.js文件的介紹,需要的朋友可以參考下2024-02-02
如果你也遇到在 vue 應用中，首頁加載資源過多，導致加載緩慢的問題，下面的方法也許能幫到你，主要的處理思想是：讓首頁多余的資源能在需要它的時候再加載2022-09-09
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實現(xiàn)方案及區(qū)別對比分析,需要的朋友可以參考下2023-03-03
vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式
這篇文章主要介紹了vue-print-nb解決vue打印問題,并且隱藏頁眉頁腳方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
使用Vue-scroller頁面input框不能觸發(fā)滑動的問題及解決方法
這篇文章主要介紹了使用Vue-scroller頁面input框不能觸發(fā)滑動的問題,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
vue3+TypeScript+vue-router的使用方法
本文詳細講解了vue3+TypeScript+vue-router的使用方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-01-01
今天將從 Vue 的入口文件開始，看看聲明了一個 Vue 的單文件之后是如何被 compile-core 編譯核心模塊編譯成渲染函數(shù)的。下面小編講解并附上代碼分析展現(xiàn)在文章里，感興趣的小伙伴不要錯過奧2021-09-09
vue?Element?UI擴展內(nèi)容過長使用tooltip顯示
這篇文章主要為大家介紹了vue?Element?UI擴展內(nèi)容過長使用tooltip展示鼠標hover時的提示信息，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)
這篇文章主要介紹了vue.js移動端app之上拉加載以及下拉刷新實戰(zhàn)，非常具有實用價值，需要的朋友可以參考下2017-09-09