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

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

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

在上面的例子中,input的引用信息为input1 , r e f s 是 所 有 注 册 过 的 r e f 的 一 个 集 合 , c o n s o l e . l o g ( t h i s . refs 是所有注册过的ref的一个集合, console.log(this. refsrefconsole.log(this.refs.input1)//

console.log(document.getElementById(‘input1’))//

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

ref和v-for在一起的情况

在这里插入图片描述

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

在这里插入图片描述

此时的$refs整个用下来就是比较方便取DOM,方便操作DOM

转载地址:http://jilsn.baihongyu.com/

你可能感兴趣的文章
linux系统的定时、延迟任务管理
查看>>
linux系统的磁盘管理方式
查看>>
管理lvm(Logical Volume Manager)
查看>>
yum源的配置及第三方软件仓库的管理、yum命令、rpm命令的使用
查看>>
linux系统的selinux管理
查看>>
linux系统的网络桥接配置及链路聚合
查看>>
关于DNS部署
查看>>
类的内存模型(二)
查看>>
生产者消费者模型
查看>>
#剑指offer Day2 一类可以用“框架”快速搞定的二叉树问题
查看>>
#剑指offer Day3 一类 “ 斐波那契 ”问题
查看>>
#剑指offer Day4 一类 “ 双指针 ”问题
查看>>
#剑指offer Day5 # 分享两个题的其他解法
查看>>
缓存淘汰算法的实现与应用介绍(LRU,LFU)
查看>>
JZ15. 反转链表
查看>>
1. 两数之和
查看>>
2. 两数相加
查看>>
JZ1.二维数组的查找
查看>>
String 类
查看>>
什么是接口
查看>>