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

一个可绑定数据源的jQuery数据表格插件

Jul 17 Javascript

获取数组中最大最小值方法js代码(自写)

Aug 12 Javascript

js给页面加style无效果的解决方法

Jan 20 Javascript

JavaScript加入收藏夹功能（兼容IE、firefox、chrome）

May 05 Javascript

jquery获取复选框的值的简单实例

May 26 Javascript

原生js图片轮播效果实现代码

Oct 19 Javascript

JavaScript中匿名函数的递归调用

Jan 22 Javascript

使用jQuery卸载全部事件的思路详解

Apr 03 jQuery

深入理解Vue2.x的虚拟DOM diff原理

Sep 27 Javascript

微信小程序版本自动更新的方法

Jun 14 Javascript

微信小程序网络通信实现详解

Jul 23 Javascript

Vue ECharts实现机舱座位选择展示功能

May 15 Vue.js

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

50个PHP程序性能优化的方法

2014/06/02 PHP

php自动提交表单的方法(基于fsockopen与curl)

2016/05/09 PHP

ThinkPHP实现更新数据实例详解(demo)

2016/06/29 PHP

详解PHP版本兼容之openssl调用参数

2018/07/25 PHP

js 返回时间戳所对应的具体时间

2010/07/20 Javascript

浏览器解析js生成的html出现样式问题的解决方法

2012/04/16 Javascript

JS简单实现文件上传实例代码（无需插件）

2013/11/15 Javascript

js图片向右一张张滚动效果实例代码

2013/11/23 Javascript

js获取select标签选中值的两种方式

2014/01/09 Javascript

常用的jquery模板插件——jQuery Boilerplate介绍

2014/09/23 Javascript

javascript日期格式化方法汇总

2015/10/04 Javascript

JavaScript进阶练习及简单实例分析

2016/06/03 Javascript

BootStrap的table表头固定tbody滚动的实例代码

2016/08/24 Javascript

JavaScript字符串对象

2017/01/14 Javascript

微信浏览器禁止页面下拉查看网址实例详解

2017/06/28 Javascript

vue中导出Excel表格的实现代码

2018/10/18 Javascript

说说Vuex的getters属性的具体用法

2019/04/15 Javascript

JS实现的tab切换并显示相应内容模块功能示例

2019/08/03 Javascript

layui select 禁止点击的实现方法

2019/09/05 Javascript

解决vue.js提交数组时出现数组下标的问题

2019/11/05 Javascript

浅谈Vue开发人员的7个最好的VSCode扩展

2021/01/20 Vue.js

[01:09]DOTA2次级职业联赛 - 99战队宣传片

2014/12/01 DOTA

Python常用正则表达式符号浅析

2014/08/13 Python

Python时间模块datetime、time、calendar的使用方法

2016/01/13 Python

Python实现按中文排序的方法示例

2018/04/25 Python

决策树剪枝算法的python实现方法详解

2019/09/18 Python

Python:type、object、class与内置类型实例

2019/12/25 Python

Python-openCV读RGB通道图实例

2020/01/17 Python

最新党员的自我评价分享

2013/11/04 职场文书

春季运动会广播稿大全

2014/02/19 职场文书

软件部经理岗位职责范本

2014/02/25 职场文书

2014年秋季开学寄语

2014/08/02 职场文书

学院党的群众路线教育实践活动整改方案

2014/10/04 职场文书

立春观后感

2015/06/18 职场文书

幼儿园大班教育随笔

2015/08/14 职场文书

golang用type-switch判断interface的实际存储类型

2022/04/14 Golang