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、react等单页面项目应该这样子部署到服务器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
最近在做一些数据透析的项目需要用到报表图，那么报表图好用的有老牌的ECharts，比较新意的AntV，思前马后的想了一下还是用了Echarts，这篇文章主要介绍了vue3中使用Apache ECharts,需要的朋友可以参考下2022-11-11
本文主要介绍了vue3中watch监听的四种写法,包含了ref 定义的数据,reactive定义的数据,函数返回的值（getter函数）和前面3个内容的数组,具有一定的参考价值,感兴趣的可以了了解一下2024-02-02
如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目
这篇文章主要介绍了如何优雅的在一台vps（云主机）上面部署vue+mongodb+express项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
今天小编就为大家分享一篇vue设置一开始进入的页面教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要为大家介绍了vue3响应式reactive依赖收集派发更新原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了vue Element左侧无限级菜单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
关于Element Loading的全局使用(自定义Loading)
这篇文章主要介绍了关于Element Loading的全局使用(自定义Loading),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家介绍了reactive readonly嵌套对象转换功能实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
本文主要介绍了vue项目中路由懒加载的三种方式,主要包括vue异步组件,组件懒加载,webpack的require.ensure(),具有一定的参考价值,感兴趣的可以了解一下2024-01-01
最新评论