编程 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中document.getElementByid、document.all和document.layers区分介绍

Dec 08 Javascript

浅析hasOwnProperty方法的应用

Nov 20 Javascript

ie 7/8不支持trim的属性的解决方案

May 23 Javascript

对之前写的jquery分页做下升级

Jun 19 Javascript

多个$(document).ready()的执行顺序实例分析

Jul 26 Javascript

JavaScript使用Prototype实现面向对象的方法

Apr 14 Javascript

JS常用算法实现代码

Nov 14 Javascript

JavaScript实现分页效果

Mar 28 Javascript

浅谈ElementUI中switch回调函数change的参数问题

Aug 24 Javascript

使用koa2创建web项目的方法步骤

Mar 12 Javascript

vue使用高德地图根据坐标定位点的实现代码

Aug 22 Javascript

jquery实现拖拽小方块效果

Dec 10 jQuery

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中将数组转成XML格式的实现代码

2011/08/08 PHP

PHP排序之二维数组的按照字母排序实现代码

2011/08/13 PHP

基于php缓存的详解

2013/05/15 PHP

ThinkPHP3.1新特性之字段合法性检测详解

2014/06/19 PHP

php中memcache 基本操作实例

2015/05/17 PHP

yii2中添加验证码的实现方法

2016/01/09 PHP

利用PHPExcel读取Excel的数据和导出数据到Excel

2017/05/12 PHP

Jquery AJAX 框架的使用方法

2009/11/03 Javascript

getElementsByTagName vs selectNodes效率及兼容的selectNodes实现

2010/02/26 Javascript

jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)

2016/04/18 Javascript

select下拉框插件jquery.editable-select详解

2017/01/22 Javascript

js实现多张图片延迟加载效果

2017/07/17 Javascript

Vue2.0用 watch 观察 prop 变化(不触发)

2017/09/08 Javascript

实时监控input框,实现输入框与下拉框联动的实例

2018/01/23 Javascript

Python中使用ConfigParser解析ini配置文件实例

2014/08/30 Python

简单介绍Python的轻便web框架Bottle

2015/04/08 Python

用Python程序抓取网页的HTML信息的一个小实例

2015/05/02 Python

python中getaddrinfo()基本用法实例分析

2015/06/28 Python

Python进阶-函数默认参数(详解)

2017/05/18 Python

Python列表和元组的定义与使用操作示例

2017/07/26 Python

Django框架多表查询实例分析

2018/07/04 Python

浅谈Python中eval的强大与危害

2019/03/13 Python

python简单验证码识别的实现方法

2019/05/10 Python

详细分析Python垃圾回收机制

2020/07/01 Python

python3 中时间戳、时间、日期的转换和加减操作

2020/07/14 Python

Python项目打包成二进制的方法

2020/12/30 Python

美国一家运动专业鞋类零售商：Warehouse Shoe Sale（WSS）

2018/03/28 全球购物

Chain Reaction Cycles俄罗斯：世界上最大的在线自行车商店

2019/08/27 全球购物

电信专业应届生自荐信

2013/09/28 职场文书

公司合作意向书范文

2014/07/30 职场文书

个人查摆问题及整改措施

2014/10/16 职场文书

齐云山导游词

2015/02/06 职场文书

敬老院活动感想

2015/08/07 职场文书

大学迎新生的欢迎词

2019/06/25 职场文书

python第三方网页解析器 lxml 扩展库与 xpath 的使用方法

2021/04/06 Python

配置nginx负载均衡

2022/05/06 Servers