Vue中的 ref 和 $refs
举报
达拉崩巴斑得贝迪卜多
发表于 2021/12/20 23:06:56
2021/12/20
【摘要】
官网解释：
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例 注...
官网解释：
ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例
注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册
下面用两个例子来深入理解ref和refs
一、ref作用于组件
<div id="app">
<navbar ref="navbar"></navbar>
<pagefooter ref="pagefooter"></pagefooter>
</div>
new Vue({
el:'#app',
mounted:function () {
//ready,
//这里怎么直接访问navbar的navs和pagefooter的footer值呢，这就用到ref了
console.log(this.$refs.navbar.navs);
console.log(this.$refs.pagefooter.footer);
}
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
通过ref和refs，父组件可以轻松获取子组件的信息。很简单!
二、ref作用于Html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p ref="thisP">{{name}}</p></div>
<script>
var vm = new Vue({
data:{
name:'王一萱'
}
}).$mount("#app")
// vm.name='Tom';
console.log(vm.$refs.thisP.textContent);
//vm.$nextTick(function () {
// console.log(vm.$refs.thisP.textContent);
//})
</script>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
上面这个例子可以获取P标签中的文本信息。这样就不需要给P标签设一个id，再document.getElementById('xx)，这相当麻烦。
三、$nextTick()
<script>
var vm = new Vue({
data:{
name:'小小陈先森'
}
}).$mount("#app")
vm.name='Tom';
console.log(vm.$refs.thisP.textContent);
vm.$nextTick(function () {
console.log(vm.$refs.thisP.textContent);
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
控制台显示
看控制台输出，明明给name赋值‘Tom’，为啥还会打印出‘小小陈先森’。name赋值‘Tom’没错，但更新到Dom这个过程是异步的(根本原因是因为 Vue中DOM更新是异步的).
所以当你打印console.log(vm.$refs.thisP.textContent);时，此时标签的文本内容还是‘小小陈先森’。
但我想获取Dom更新的数据啊，我想获取到的是’Tom’。怎么办？
使用Vue.nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM.
this.$nextTick(() => {
console.log(vm.$refs.thisP.textContent);
}
- 1
- 2
- 3
文章来源: lvsige.blog.csdn.net，作者：祥子的小迷妹，版权归原作者所有，如需转载，请联系作者。
原文链接：lvsige.blog.csdn.net/article/details/108476433
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）