博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue中的 ref 和 $refs
阅读量:7024 次
发布时间:2019-06-28

本文共 511 字,大约阅读时间需要 1 分钟。

如图,ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例:

在上面的例子中,input的引用信息为input1 ,$refs 是所有注册过的ref的一个集合,

console.log(this.$refs.input1)//<input type="text" id="input1">

console.log(document.getElementById('input1'))//<input type="text" id="input1">

 这两种方法获得的都是Dom节点,而$refs相对document.getElementById的方法,会减少获取dom节点的消耗。

ref和v-for在一起的情况

li里的ref的无法读取item里面的值,即item.name或被直接读取为字符串“item.name”,

此时的$refs

 

 整个用下来就是比较方便取DOM,方便操作DOM

转载于:https://www.cnblogs.com/raind/p/8544164.html

你可能感兴趣的文章
今天不谈技术,说说一些常用的软件~By 逆天
查看>>
cocos2d-x 音乐/音效设置
查看>>
Oracle的条件in包含NULL时的处理
查看>>
Web APi之EntityFramework【CRUD】(三)
查看>>
Scala IDE里的WorkSheet的使用
查看>>
Net设计模式实例之迭代器模式(Iterator Pattern)
查看>>
让Editplus自动格式化js、css、html。。。
查看>>
Linux内核跟踪之ring buffer的实现【转】
查看>>
MediaWiki安装配置(Linux)【转】
查看>>
搜索服务solr 一二事(1) - solr-5.5 使用自带Jetty或者tomcat 搭建单机版搜索服务器...
查看>>
Mac mysql 解决中文乱码
查看>>
8.16. config
查看>>
I.MX6 console 跳过 login
查看>>
ASP.NET 5 (vNext) 理解和概述
查看>>
第 44 章 LevelDB
查看>>
Java实现文件复制的四种方式
查看>>
使用数据库sqlite3 C语言实现登陆注册的功能
查看>>
[LeetCode] Distinct Subsequences
查看>>
Android gif 录屏
查看>>
51Nod 1277 字符串中的最大值(KMP,裸题)
查看>>