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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
javascript css在IE和Firefox中区别分析
Feb 18 Javascript
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
开启BootStrap学习之旅
May 04 Javascript
JavaScript实现时间倒计时跳转(推荐)
Jun 28 Javascript
微信小程序 教程之模板
Oct 18 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
JQuery animate动画应用示例
May 14 jQuery
js实现省级联动(数据结构优化)
Jul 17 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
精通php的十大要点(上)
2009/02/04 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
下载给定网页上图片的方法
2014/02/18 Python
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
用python删除java文件头上版权信息的方法
2014/07/31 Python
不要用强制方法杀掉python线程
2017/02/26 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python进程间通信 multiProcessing Queue队列实现详解
2019/09/23 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
什么是唯一索引
2015/07/05 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
环保公益策划方案
2014/08/15 职场文书
求职简历自我评价范文
2015/03/10 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
在职证明格式样本
2015/06/15 职场文书
超市主管竞聘书
2015/09/15 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python