概述
ref作用于组件
<div id="app">
<navbar></navbar>
<pagefooter></pagefooter>
</div>
Vue.component('navbar',{
template:'#navbar',
data:function () {
return {
navs:[]
}
}
});
Vue.component('pagefooter',{
template:'#pagefooter',
data:function () {
return {
footer:''
}
}
});
new Vue({
el:'#app',
mounted:function () {
//ready,
//这里怎么直接访问navbar的navs和pagefooter的footer值呢，
}
})这就用到ref了
修改组件
<div id="app">
<navbar ref="navbar"></navbar>
<pagefooter ref="pagefooter"></pagefooter>
</div>
new Vue({
el:'#app',
mounted:function () {
//ready,
//这里怎么直接访问navbar的navs和pagefooter的footer值呢，
console.log(this.$refs.navbar.navs);
console.log(this.$refs.pagefooter.footer);
}
})通过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:'Tom Cat'
}
}).$mount("#app")
// vm.name='Tom';
console.log(vm.$refs.thisP.textContent);
//vm.$nextTick(function () {
// console.log(vm.$refs.thisP.textContent);
//})
</script>
</body>
</html>上面这个例子可以获取P标签中的文本信息。这样就不需要给P标签设一个id，再document.getElementById('xx)，这相当麻烦。
三、$nextTick()
<script>
var vm = new Vue({
data:{
name:'Tom Cat'
}
}).$mount("#app")
vm.name='Tom';
console.log(vm.$refs.thisP.textContent);
vm.$nextTick(function () {
console.log(vm.$refs.thisP.textContent);
})
</script>看控制台输出，明明给name赋值‘Tom’，为啥还会打印出‘Tom Cat’。name赋值‘Tom’没错，但更新到Dom这个过程是异步的(根本原因是因为Vue中DOM更新是异步的).
所以当你打印console.log(vm.$refs.thisP.textContent);时，此时标签的文本内容还是‘Tom Cat’。
但我想获取Dom更新的数据啊，我想获取到的是'Tom'。怎么办？
使用Vue.nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM.
this.$nextTick(() => {
console.log(vm.$refs.thisP.textContent);
})
最后
以上就是花痴服饰为你收集整理的vue里ref和$refs的区别的全部内容，希望文章能够帮你解决vue里ref和$refs的区别所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复