vue.js中ref和$refs的使用及示例讲解


Posted in Javascript onAugust 14, 2019

关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的:

vue.js中ref和$refs的使用及示例讲解

ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上。

如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件;

vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的;类似于jquey中的$(".xxx");

那么我们如何使用ref和$refs呢?

ref可以直接加在HTML标签上,作为一个属性存在于HTML标签中,如图

<input title="手机号" name="mobile" ref="mobile" placeholder="手机号" type="tel" is-type="china-mobile" required :min="11" :max="11"></input>

这样,我们就是给input输入框元素注册了引用信息,那么我们如何获取这个DOM元素呢?

同样,vue.js也给我们提供了特定的方法:

this.$refs.mobile

vue.js中ref和$refs的使用及示例讲解

vue.js中ref和$refs的使用及示例讲解

上面图片就是我们this.$refs.mobile的输出结果 ,vue.js提供的获取DOM元素的方法确实还是很方便呢

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
常用的几段javascript代码分享
Mar 25 Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
VUE中使用MUI方法
Feb 12 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
vue filter 完美时间日期格式的代码
Aug 14 #Javascript
如何对react hooks进行单元测试的方法
Aug 14 #Javascript
vue 中 命名视图的用法实例详解
Aug 14 #Javascript
详解vue 命名视图
Aug 14 #Javascript
浅谈JS中this在各个场景下的指向
Aug 14 #Javascript
Vue路由模块化配置的完整步骤
Aug 14 #Javascript
You might like
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
jquery 手势密码插件
2017/03/17 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python3+selenium实现126邮箱登陆并发送邮件功能
2019/01/23 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
python 如何调用远程接口
2020/09/11 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
优秀会计求职信
2014/07/04 职场文书
党员三严三实心得体会
2014/10/13 职场文书
狮子林导游词
2015/02/03 职场文书
团委副书记工作总结
2015/08/14 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
pytorch--之halfTensor的使用详解
2021/05/24 Python