编程 Javascript

vue.js中ref及$refs的使用方法解析

Posted in Javascript onOctober 08, 2019

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

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的使用方法解析

上面图片就是我们this.$refs.mobile的输出结果，vue.js提供的获取DOM元素的方法确实还是很方便呢，希望我的博客能够帮助您更好的理解vue语法的使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue.js中ref及$refs的使用方法解析

- Author -

有梦想的咸鱼前端

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 禁止复制网页

Jun 11 Javascript

jQuery表单验证插件formValidator(改进版)

Feb 03 Javascript

详解AngularJS中的表达式使用

Jun 16 Javascript

BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)

Jul 07 Javascript

JS解决iframe之间通信和自适应高度的问题

Aug 24 Javascript

jQuery子元素过滤选择器用法示例

Sep 09 Javascript

JS中mouseup事件丢失的原因与解决办法

Jun 14 Javascript

vue 父组件调用子组件方法及事件

Mar 29 Javascript

微信小程序实现漂亮的弹窗效果

May 26 Javascript

详解vue-cli脚手架中webpack配置方法

Aug 22 Javascript

js中比较两个对象是否相同的方法示例

Sep 02 Javascript

原生JS实现萤火虫效果

Mar 07 Javascript

javascript实现函数柯里化与反柯里化过程解析

Oct 08 #Javascript

新手入门js闭包学习过程解析

Oct 08 #Javascript

关于JSON解析的实现过程解析

Oct 08 #Javascript

解决webpack多页面内存溢出的方法示例

Oct 08 #Javascript

javascript简单实现深浅拷贝过程详解

Oct 08 #Javascript

webpack HappyPack实战详解

Oct 08 #Javascript

简单了解vue中的v-if和v-show的区别

Oct 08 #Javascript

You might like

php 调用远程url的六种方法小结

2009/11/02 PHP

探讨:array2xml和xml2array以及xml与array的互相转化

2013/06/24 PHP

codeigniter发送邮件并打印调试信息的方法

2015/03/21 PHP

利用PHP将图片转换成base64编码的实现方法

2016/09/13 PHP

Fleaphp常见函数功能与用法示例

2016/11/15 PHP

PHPExcel实现表格导出功能示例【带有多个工作sheet】

2018/06/13 PHP

基于JQuery 的消息提示框效果代码

2011/07/31 Javascript

js中判断文本框是否为空的两种方法

2011/07/31 Javascript

纯js分页代码(简洁实用)

2013/11/05 Javascript

jquery如何通过name名称获取当前name的value值

2013/12/20 Javascript

JS实现将人民币金额转换为大写的示例代码

2014/02/13 Javascript

js实现的动画导航菜单效果代码

2015/09/10 Javascript

jQuery实现的仿百度分页足迹效果代码

2015/10/30 Javascript

js简单判断移动端系统的方法

2016/02/25 Javascript

jquery实现无刷新验证码的简单实例

2016/05/19 Javascript

15位和18位身份证JS校验的简单实例

2016/07/18 Javascript

jQuery仿IOS弹出框插件

2017/02/18 Javascript

Vue2.0实现1.0的搜索过滤器功能实例代码

2017/03/20 Javascript

详解在Angularjs中ui-sref和$state.go如何传递参数

2017/04/24 Javascript

react-router4 嵌套路由的使用方法

2017/07/24 Javascript

node.js的exports、module.exports与ES6的export、export default深入详解

2017/10/26 Javascript

利用JS实现一个同Excel表现的智能填充算法

2018/08/13 Javascript

Bootstrap-table自定义可编辑每页显示记录数

2018/09/07 Javascript

Angular(5.2->6.1)升级小结

2018/12/27 Javascript

vue.js 2.0实现简单分页效果

2019/07/29 Javascript

vue改变循环遍历后的数据实例

2019/11/07 Javascript

javascript设计模式 ? 迭代器模式原理与用法实例分析

2020/04/17 Javascript

[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼

2014/07/07 DOTA

浅谈对yield的初步理解

2017/05/29 Python

python按行读取文件,去掉每行的换行符\n的实例

2018/04/19 Python

python列表每个元素同增同减和列表元素去空格的实例

2019/07/20 Python

Python爬虫学习之获取指定网页源码

2019/07/30 Python

简单了解python shutil模块原理及使用方法

2020/04/28 Python

技能竞赛活动方案

2014/02/21 职场文书

租房安全协议书

2014/08/20 职场文书

银行领导班子四风对照检查材料

2014/09/27 职场文书