平武建站

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节点或组件实例的数组。




    Vue


    
        Node
                 {{i}}
    
    Vue.component("layout-div", {       data: function(){           return {             count: 0           }       },       template: `
                    
{{count}}
                
`     })       var vm = new Vue({         el: '#app',         mounted: function(){             console.log(this.$refs.node); // 
Node
 // DOM元素             console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例             console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组         }     })

因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nextTick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作DOM元素，尽量使用数据绑定让MVVM的ViewModel去操作DOM。




    Vue


    
      var vm = new Vue({         el: '#app',         data: function(){             return {                 msg: 0             }         },         template:  `
                       {{msg}}
                       button                     `,         beforeMount: function(){             console.log(this.$refs.node); // undefined         },         mounted: function(){             console.log(this.$refs.node); // 
0
        },         methods: {             updateMsg: function(){                 this.msg = 1;                 console.log(this.$refs.node.innerHTML); // 0                 this.$nextTick(() => {                     console.log(this.$refs.node.innerHTML); // 1                 })             }         }     })

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]。

vue的$refs是什么及怎么使用

1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。

2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

例子1:

添加ref属性


    这是H1
    
 
    获取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代码：

 
                          
                            
                            
                          
                          {{ $t('查看') }}
                        

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://pwwzsj.com/article/jdieso.html

其他资讯