编程 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 相关文章推荐

用js实现的自定义的对话框的实现代码

Mar 21 Javascript

js自定义事件代码说明

Jan 31 Javascript

解决js中window.open弹出的是上次的缓存页面问题

Dec 29 Javascript

jquery选择器之内容过滤选择器详解

Jan 27 Javascript

谈谈javascript中使用连等赋值操作带来的问题

Nov 26 Javascript

基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)

Oct 27 Javascript

vue2中filter()的实现代码

Jul 09 Javascript

Vue实现textarea固定输入行数与添加下划线样式的思路详解

Jun 28 Javascript

JavaScript实现的简单Tab点击切换功能示例

Jul 06 Javascript

JavaScript实现京东放大镜效果

Dec 03 Javascript

微信小程序登录时如何获取input框中的内容

Dec 04 Javascript

使用react-virtualized实现图片动态高度长列表的问题

May 28 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

为什么夜间收到的中波电台比白天多

2021/03/01 无线电

深入PHP curl参数的详解

2013/06/17 PHP

hadoop常见错误以及处理方法详解

2013/06/19 PHP

PHP实现统计所有字符在字符串中出现次数的方法

2017/10/17 PHP

JQuery Easyui Tree的oncheck事件实现代码

2010/05/28 Javascript

document.createElement()用法

2013/03/13 Javascript

jquery使用经验小结

2015/05/20 Javascript

JavaScript实现图片轮播的方法

2015/07/31 Javascript

JavaScript实现的圆形浮动标签云效果实例

2015/08/06 Javascript

轻松学习jQuery插件EasyUI EasyUI创建CRUD应用

2015/11/30 Javascript

window.onload绑定多个事件的两种解决方案

2016/05/15 Javascript

实现React单页应用的方法详解

2016/08/02 Javascript

require.js 加载 vue组件 r.js 合并压缩的实例

2016/10/14 Javascript

vue2.0+webpack环境的构造过程

2016/11/08 Javascript

javascript实现鼠标点击页面移动DIV

2016/12/02 Javascript

vue.js将unix时间戳转换为自定义时间格式

2017/01/03 Javascript

基于vue,vue-router, vuex及addRoutes进行权限控制问题

2018/05/02 Javascript

关于vue的npm run dev和npm run build的区别介绍

2019/01/14 Javascript

vue2.0中set添加属性后视图不能更新的解决办法

2019/02/22 Javascript

vue发送websocket请求和http post请求的实例代码

2019/07/11 Javascript

[01:20]辉夜杯背景故事宣传片《辉夜传说》

2015/12/25 DOTA

python实现网页链接提取的方法分享

2014/02/25 Python

python使用webbrowser浏览指定url的方法

2015/04/04 Python

解决Pycharm无法import自己安装的第三方module问题

2018/05/18 Python

Python读取YUV文件,并显示的方法

2018/12/04 Python

python 爬虫百度地图的信息界面的实现方法

2019/10/27 Python

Django连接数据库并实现读写分离过程解析

2019/11/13 Python

通过实例解析Python RPC实现原理及方法

2020/07/07 Python

Python字典取键、值对的方法步骤

2020/09/30 Python

欧舒丹英国官网：购买欧舒丹护手霜等明星产品

2017/01/17 全球购物

The Hut美国/加拿大：英国领先的豪华在线百货商店

2019/03/26 全球购物

女方婚礼新郎答谢词

2014/01/11 职场文书

有关九一八事变的演讲稿

2014/09/14 职场文书

师德师风整改措施

2014/10/24 职场文书

软弱涣散基层党组织整改方案

2014/10/25 职场文书

毕业实习证明范本

2015/06/16 职场文书