本教程操作环境：windows7系统、vue3版，dell g3电脑。
vue中的$refs
$refs是一个对象，持有注册过ref attribute的所有dom元素和组件实例。
描述
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上，
如果在普通的dom元素上使用，引用指向的就是dom元素；
如果用在子组件上，引用就指向组件实例；
另外当v-for用于元素或组件的时候，引用信息将是包含dom节点或组件实例的数组。【相关推荐：vuejs视频教程、web前端开发】
<!doctype html><html><head> <title>vue</title></head><body> <div id="app"> <div ref="node">node</div> <layout-div ref="layout"></layout-div> <div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div> </div></body><script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script type="text/javascript"> vue.component("layout-div", { data: function(){ return { count: 0 } }, template: `<div> <div>{{count}}</div> </div>` }) var vm = new vue({ el: '#app', mounted: function(){ console.log(this.$refs.node); // <div>node</div> // dom元素 console.log(this.$refs.layout); // vuecomponent {_uid: 1, ...} // 组件实例 console.log(this.$refs.nodearr); // (3) [div, div, div] // dom元素数组 } })</script></html>
因为ref本身是作为渲染结果被创建的，在初始渲染的时候是不能访问的，因为其还不存在，而且$refs也不是响应式的，因此不应该试图用它在模板中做数据绑定，在初始化访问ref时，应该在其生命周期的mounted方法中调用，在数据更新之后，应该在$nexttick方法中传递回调操作来获取元素或实例，此外一般不推荐直接操作dom元素，尽量使用数据绑定让mvvm的viewmodel去操作dom。
<!doctype html><html><head> <title>vue</title></head><body> <div id="app"></div></body><script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script><script type="text/javascript"> var vm = new vue({ el: '#app', data: function(){ return { msg: 0 } }, template: `<div> <div ref="node">{{msg}}</div> <button @click="updatemsg">button</button> </div>`, beforemount: function(){ console.log(this.$refs.node); // undefined }, mounted: function(){ console.log(this.$refs.node); // <div>0</div> }, methods: { updatemsg: function(){ this.msg = 1; console.log(this.$refs.node.innerhtml); // 0 this.$nexttick(() => { console.log(this.$refs.node.innerhtml); // 1 }) } } })</script></html>
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属性
<div id="app"> <h1 ref="h1ele">这是h1</h1> <hello ref="ho"></hello> <button @click="getref">获取h1元素</button></div>
获取注册过 ref 的所有组件或元素
methods: { getref() { // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele dom元素或组件 console.log(this.$refs.h1ele.innertext); this.$refs.h1ele.style.color = 'red';// 修改html样式 console.log(this.$refs.ho.msg);// 获取组件数据 console.log(this.$refs.ho.test);// 获取组件的方法 } }
例子2:vue代码：
<!-- 列表部分 --> <el-table @sort-change="sortchange" ref="multipleselection" border :data="valuedrygoodtabledata" style="width: 100%"> <el-table-column align="left" prop="title" label="标题" min-width="80%" sortable="custom"> <template slot-scope="scope"> <a target="_blank" :class="scope.row.titleclicked?'titleclicked':''" class="hoverhand bluetext" v-html="scope.row.title" @click="titleclick(scope.row.articleurl,scope.$index)"> </a> </template> </el-table-column> <el-table-column align="left" prop="releasetime" label="发布日期" min-width="11%" sortable="custom"></el-table-column> <el-table-column align="center" label="操作" min-width="9%"> <template slot-scope="scope"> <span class="operatorytools"> <i title="取消收藏" v-if="scope.row.isfavour" @click="favoriteoperating(scope.row.id, scope.$index)" class="hoverhand iconstyle el-icon-star-on"></i> <i title="收藏" v-else @click="favoriteoperating(scope.row.id, scope.$index)" class="hoverhand iconstyle el-icon-star-off"></i> <i title="分享" @click.stop="showshareoperation(scope.$index)" class="sharetarg iconfont"></i> <div class="share" v-if="scope.row.showshare"> <img class="hoverhand shareitem" title="分享到微博" @click="shareitem('sina',$event);" src="@/images/weibo.png"> <img class="hoverhand shareitem" title="分享到微信" @click.stop="shareitem('wx',$event);" src="@/images/weixin.png"> <img class="hoverhand shareitem" title="分享到qq" @click="shareitem('qq',$event);" src="@/images/qq.png"> </div> <div v-show="scope.row.erweimashare" class="erweima_share"></div> <div v-show="scope.row.erweimashare1" class="erweima_share1"></div> </span> </template> </el-table-column> </el-table>
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代码：
<el-form-item ref="goodpicinfoformpicurl" :label="$t('许可证证照')" class="is-required" prop="picurl"> <el-upload :show-file-list="false" :http-request="uploadimg" :data="certimgform" action="" class="avatar-uploader"> <img v-if="queryfrom.picurl" :src="queryfrom.picurl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"/> </el-upload> <el-button type="primary" plain size="mini" @click="viewpcpic(queryfrom.picurl)">{{ $t('查看') }}</el-button> </el-form-item>
js代码：
//获取元素清除验证 this.$refs.goodpicinfoformpicurl.clearvalidate()
一般来讲，想获取input框，首先在获取dom元素，需document.queryselector（.input1）获取这个dom节点，然后在获取input1的值。
但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。
然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是vue的$refs是什么意思的详细内容。