vue的$refs是什么及怎么使用
这篇文章主要讲解了“vue的$refs是什么及怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue的$refs是什么及怎么使用”吧!
成都创新互联公司专注于企业营销型网站、网站重做改版、江孜网站定制设计、自适应品牌网站建设、H5建站、电子商务商城网站建设、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为江孜等各大城市提供网站开发制作服务。
在vue中,$refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的“$refs”对象上;如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例。
Vue中的$refs
$refs是一个对象,持有注册过ref attribute的所有DOM元素和组件实例。
描述
ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上,
如果在普通的DOM元素上使用,引用指向的就是DOM元素;
如果用在子组件上,引用就指向组件实例;
另外当v-for用于元素或组件的时候,引用信息将是包含DOM节点或组件实例的数组。
因为ref本身是作为渲染结果被创建的,在初始渲染的时候是不能访问的,因为其还不存在,而且$refs也不是响应式的,因此不应该试图用它在模板中做数据绑定,在初始化访问ref时,应该在其生命周期的mounted方法中调用,在数据更新之后,应该在$nextTick方法中传递回调操作来获取元素或实例,此外一般不推荐直接操作DOM元素,尽量使用数据绑定让MVVM的ViewModel去操作DOM。
VUE中$refs的基本用法
ref 有三种用法:
1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素
2、ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值).方法() 就可以使用了。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
应注意的坑:
1、如果通过v-for 遍历想加不同的ref时记得加 :
号,即 :ref =某变量
;
这点和其他属性一样,如果是固定值就不需要加 :
号,如果是变量记得加 :
号。(加冒号的,说明后面的是一个变量或者表达式;没加冒号的后面就是对应的字符串常量(String))
2、通过 :ref =某变量
添加ref(即加了:
号) ,如果想获取该ref时需要加 [0]
,如this.$refs[refsArrayItem] [0]
;如果不是:ref =某变量
的方式而是 ref =某字符串
时则不需要加,如this.$refs[refsArrayItem]。
1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用。
2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组,此时要拿到单个的ref 只需要循环就可以了。
例子1:
添加ref属性
这是H1
获取注册过 ref 的所有组件或元素
methods: {
getref() {
// 表示从 $refs对象 中, 获取 ref 属性值为: h2ele DOM元素或组件
console.log(this.$refs.h2Ele.innerText);
this.$refs.h2ele.style.color = 'red';// 修改html样式
console.log(this.$refs.ho.msg);// 获取组件数据
console.log(this.$refs.ho.test);// 获取组件的方法
}
}
例子2:
Vue代码:
JS代码:
//点击清空条件,调用该方法
emptyAndSearch(){//清空条件方法
//清空树选中状态
this.clearTreeNodeCheck(['tree']);
//清除排序
this.$refs.multipleSelection.clearSort();
//设置分页参数
this.queryParam = {
startRow : 1,
pageSize : 20,
condition:{
}
}
//分页查询调用
this.confirmSearch('statistics');
//设置清空条件为false
this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
}
例子3:
Vue代码:
JS代码:
//获取元素清除验证
this.$refs.goodPicInfoFormpicUrl.clearValidate()
一般来讲,想获取INPUT框,首先在获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值。
但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行。
然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了。
感谢各位的阅读,以上就是“vue的$refs是什么及怎么使用”的内容了,经过本文的学习后,相信大家对vue的$refs是什么及怎么使用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
文章标题:vue的$refs是什么及怎么使用
文章URL:http://scyanting.com/article/jdieso.html