Vue中$refs的理解
时间:2022-07-24
本文章向大家介绍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://juejin.im/post/5da58c54e51d4524e207fb92
- Rafy 领域实体框架演示(4) - 使用本地文件型数据库 SQLCE 绿色部署
- spring 的OpenSessionInViewFilter简介
- Android TextView中文字通过SpannableString来设置超链接、颜色、字体等属性
- 【Java SE】Java NIO系列教程(三) Buffer
- android混淆
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)
- 两个activity或者activity和fragment传值
- 【强烈推荐】Java工程师如何从一名普通的码农成长为一位大神
- Remoting: Server encountered an internal error
- 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](四)
- 在mono 3.0 下运行ASP.NET 4网站的主意事项
- 《干货系列》SQL语句-知无不言言无不尽
- OutOfMemoryError异常系列之方法区溢出和运行时常量溢出池溢出
- 代码转换工具 Code Converter 2013
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- synchronized的实现原理——对象头解密
- Golang 汇编入门知识总结
- C语言小笔记(1)
- 这一次搞懂Spring的XML解析原理
- 这一次搞懂Spring自定义标签以及注解解析原理
- 这一次搞懂Spring的Bean实例化原理
- 单片机入门学习十三 STM32单片机学习十 通用定时器
- Spring IOC原理补充(循环依赖、Bean作用域等)
- 这一次搞懂Spring代理创建及AOP链式调用过程
- 这一次搞懂Spring事务注解的解析
- 这一次搞懂Spring事务是如何传播的
- 这一次搞懂SpringMVC原理
- 这一次搞懂Spring Web零xml配置原理以及父子容器关系
- 这一次搞懂SpringBoot核心原理(自动配置、事件驱动、Condition)
- 全网最深分析SpringBoot MVC自动配置失效的原因