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。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue3中的三种函数，分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍，有需要的朋友可以借鉴参考下2021-09-09
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载,这篇文章主要介绍了vue项目中vue.config.js文件的介绍,需要的朋友可以参考下2024-02-02
如果你也遇到在 vue 应用中，首页加载资源过多，导致加载缓慢的问题，下面的方法也许能帮到你，主要的处理思想是：让首页多余的资源能在需要它的时候再加载2022-09-09
在理解浅拷贝和深拷贝浅前，必须先理解基本数据类型和引用数据类型的区别，这篇文章主要介绍了Vue浅拷贝和深拷贝实现方案及区别对比分析,需要的朋友可以参考下2023-03-03
vue-print-nb解决vue打印问题,并且隐藏页眉页脚方式
这篇文章主要介绍了vue-print-nb解决vue打印问题,并且隐藏页眉页脚方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
这篇文章主要介绍了使用Vue-scroller页面input框不能触发滑动的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
vue3+TypeScript+vue-router的使用方法
本文详细讲解了vue3+TypeScript+vue-router的使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
今天将从 Vue 的入口文件开始，看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里，感兴趣的小伙伴不要错过奥2021-09-09
vue Element UI扩展内容过长使用tooltip显示
这篇文章主要为大家介绍了vue Element UI扩展内容过长使用tooltip展示鼠标hover时的提示信息，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了vue.js移动端app之上拉加载以及下拉刷新实战，非常具有实用价值，需要的朋友可以参考下2017-09-09
最新评论