在vue.js中使用ref和$refs以及示例说明

vue.js中文社区(https://cn.vuejs.org/v2/api/#ref)对ref和$refs的用法和解释解释如下：

Ref用于注册元素或子组件的引用信息，引用信息将注册在父组件的$refs对象上。

如果在普通的DOM元素上使用，引用指向DOM元素；如果用于子组件，则引用指向组件；

vue.js中文社区文档上的描述相对容易理解。事实上，我们可以理解，ref和$refs实际上是用来获取/操作DOM元素的；类似于$('。jquey中的XXX’；

那么我们如何使用ref和$refs呢？

Refs可以直接添加到HTML标记中，并作为属性存在于HTML标记中，如图所示

Input title='手机号码' name=' mobile ' ref=' mobile ' placeholder='手机号码' type=' tel ' is-type=' China-mobile ' required d :min=' 11 ' 3360 max=' 11 '/input这样，我们就只注册了输入框元素的引用信息。

同样，vue.js也为我们提供了一个具体的方法：

这个。$ refs . mobile

上图是我们这个的输出结果。$ refs . mobile vue . js提供的获取DOM元素的方法真的非常方便

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。