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 相关文章推荐
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
手写实现JS中的new
Nov 07 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 include,include_once,require,require_once
2008/09/05 PHP
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python属于解释型语言么
2020/06/15 Python
CSS3样式linear-gradient的使用实例
2017/01/16 HTML / CSS
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
vue路由实现登录拦截
2021/03/24 Vue.js
学院书画协会部门职责
2013/11/28 职场文书
美术专业自荐信
2014/07/07 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
华清池导游词
2015/02/02 职场文书
校长个人总结
2015/03/03 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python