vue中ref和e.target的区别以及ref用法
更新时间：2024年03月24日 09:07:07 作者：应该少了点什么
这篇文章主要介绍了vue中ref和e.target的区别以及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成了动态的情况</button>
refDongTai(e){
console.log(e.target)
console.log(this.$refs[this.age]) // 可以访问，但没什么实质性的用处
}
这个时候， age是一个变量，假设age的值是18，那么这个ref使用的是标识是18这个数值
3、ref和e.target的区别
<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的用法还单词比较少。
要想知道其区别，还需要打印一下，refs
getRefAge(e){
console.log(this.$refs) // {age: button标签}
}
现在就可以知道了，因为ref是保存在了this身上的，即vue的实例身上的，那么标识了ref的，
可以在任意位置将标签取出来使用，而e.target,则仅限于触发了这个标签事件的时候可以使用
说白了，就是this.$refs的作用范围 > e.target。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue踩坑记录之src的动态绑定赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
下面小编就为大家分享一篇改变vue请求过来的数据中的某一项值的方法(详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
详解VUE自定义组件中用.sync修饰符与v-model的区别
这篇文章主要介绍了详解VUE自定义组件中用.sync修饰符与v-model的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家介绍了vite插件打包更顺畅的使用技巧示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue监听dom大小改变案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue使用rem实现 移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下2018-09-09
市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,下面这篇文章主要给大家介绍了关于vue自定义封装指令以及实际使用的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要为大家详细介绍了在vue3中使用el-table实现新旧数据对比,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以参考一下2023-12-12
本文介绍了如何在UniApp中实现顶部标签页切换功能,u-tab-bar组件提供了便捷的标签切换功能和丰富的样式选项,而swiper组件则更加灵活,支持自定义切换方式,根据自己的需求选择合适的方式实现顶部标签页切换,感兴趣的朋友一起看看吧2025-02-02
在Vue前端项目中,可通过axios库发送请求至后端获取Excel下载链接,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-10-10
最新评论