咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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是什么及怎么使用
网站网址：http://cqcxhl.cn/article/jdieso.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP