Vue中$refs的理解
Vue中$refs的理解
$refs是一个对象，持有注册过ref attribute的所有DOM元素和组件实例。
描述
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例，另外当v-for用于元素或组件的时候，引用信息将是包含DOM节点或组件实例的数组。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div ref="node">Node</div>
<layout-div ref="layout"></layout-div>
<div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
Vue.component("layout-div", {
data: function(){
return {
count: 0
}
},
template: `<div>
<div>{{count}}</div>
</div>`
})
var vm = new Vue({
el: '#app',
mounted: function(){
console.log(this.$refs.node); // <div>Node</div> // DOM元素
console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例
console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组
}
})
</script>
</html>
因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: function(){
return {
msg: 0
}
},
template: `<div>
<div ref="node">{{msg}}</div>
<button @click="updateMsg">button</button>
</div>`,
beforeMount: function(){
console.log(this.$refs.node); // undefined
},
mounted: function(){
console.log(this.$refs.node); // <div>0</div>
},
methods: {
updateMsg: function(){
this.msg = 1;
console.log(this.$refs.node.innerHTML); // 0
this.$nextTick(() => {
console.log(this.$refs.node.innerHTML); // 1
})
}
}
})
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://cn.vuejs.org/v2/api/#ref
https://zhuanlan.zhihu.com/p/50638655
https://juejin.im/post/5da58c54e51d4524e207fb92
Vue中$refs的理解的更多相关文章
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- vue中$refs的使用
vue中$refs获取组件或元素: 获取的元素就相当于是一个原生获取的元素,可以进行操作 this.$refs.ele.style.color = 'red
- vue & button & refs & click & bug
vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...
- vue中keepalive怎么理解？---vue中文社区
vue中keepalive怎么理解? 说在前面: keep-alive是vue源码中实现的一个组件, 感兴趣的可以研究源码 https://github.com/vuejs/vue/blob/dev/ ...
- vue中mixins的理解及应用
vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
- vue渐进式开发的理解和指令
1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...
- Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）
在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...
- 理解MVVM在react、vue中的使用
理解MVVM在react.vue中的使用 一:什么是MVC.为什么不用MVC 1:MVC的含义: M(modal):是应用程序中处理数据逻辑的部分. V (view) :是应用程序中数据显示的部分. ...
- 函数防抖节流的理解及在Vue中的应用
防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入 ...
- 对vue中nextTick()的理解及使用场景说明
异步更新队列: 首先我们要对vue的数据更新有一定理解: vue是依靠数据驱动视图更新的,该更新的过程是异步的. 即:当侦听到你的数据发生变化时, Vue将开启一个队列(该队列被Vue官方称为异步更新 ...
随机推荐
- 【C/C++】宏参数多对一和宏部分替换
宏参数多对一:使用分号分隔多参数 宏部分替换:替换需要转换的再与后续宏接续 #include <stdio.h> #define _MESS_FAILED() printf("% ...
- [转帖]ARM内核全解析，从ARM7,ARM9到Cortex-A7,A8,A9,A12,A15到Cortex-A53,A57
https://www.cnblogs.com/senior-engineer/p/8668723.html 前不久ARM正式宣布推出新款ARMv8架构的Cortex-A50处理器系列产品,以此来扩大 ...
- [转帖]--build=arm-linux
今天在arm上用configure生成makefile时报错:configure: error: cannot guess build type; you must specify one 问题: 不 ...
- [转帖]springboot中使用skywalking实现日志追踪
文章目录 SkyWalking分布式追踪系统 介绍 主要架构 环境 引入依赖 配置Log4j2 下载编译好的8.7.0版本包 使用探针实现日志追踪 启动脚本 启动Java服务 访问服务 使用UI 切换 ...
- [转帖]关于Nacos默认token.secret.key及server.identity风险说明及解决方案公告
https://nacos.io/zh-cn/blog/announcement-token-secret-key.html 近期Nacos社区收到关于Nacos鉴权功能通过token.secret. ...
- [转帖]一次操作系统报错OutOfMemory Error的处理记录
在启动公司内嵌的tomcat容器时出现报错, 如下: # There is insufficient memory for the Java Runtime Environment to contin ...
- [转帖]RFC1180
[译] RFC 1180:朴素 TCP/IP 教程(1991) 译者序 本文翻译自 1991 年的一份 RFC(1180): A TCP/IP Tutorial. 本文虽距今将近 20 年,但内容并未 ...
- CentOS8 安装Oracle19c RPM的办法
1. 下载相应的rpm包 我这边使用的主要有: -rw-r--r-- 1 root root 19112 Apr 5 15:13 compat-libcap1-1.10-7.el7.x86_64.rp ...
- Linux 环境下 node 以及 jit 的简单环境配置说明
注意事项: 1. 注意这个包需要实时更新. 2. 更新时需要按照目录覆盖文件. 3. 谁负责谁治理的态度, 有更新,需要完整的进行覆盖安装. 建议先删除旧文件, 替换新文件. 4. 为了简单起见, 直 ...
- 学习: Linux的 date 命令
date 命令非常好用 多用 date --h 还是非常好的 获取 今天是今年的第多少天 最简单的办法 就是 date +%j 以后需要多学习 多利用 linux的帮助才可以呢. Usage: dat ...