vue中ref与$refs详解
ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs上，如果在普通的DOMM元素上使用，那么就是指向普通的DOM元素。
ref的三种用法：
1、ref加在普通元素上，用this. r e f s . n a m e 或 者 t h i s . refs.name或者this. refs.name或者this.refs[‘name’]获取的1是DOM元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../vue.js"></script></head><body><div id="app"><div ref='text1'>我是测试1</div><button @click="click">按钮</button></div></body><script type="text/javascript">var vm = new Vue({el: "#app",methods: {click: function() {console.log(this.$refs.text1)}}})</script>
</html>2、ref加在组件上，用this. r e f s . n a m e 或 者 t h i s . refs.name或者this. refs.name或者this.refs[‘name’]获取的1是组件实例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><div ref="text1">我是测试1</div><temp ref="text2"></temp><button @click="click">按钮</button></div></body><script type="text/javascript">Vue.component('temp',{template:'我是组件'})var vm =new Vue({el:'#app',methods:{click:function(){console.log(this.$refs)console.log(this.$refs['text1'])console.log(this.$refs['text2'])}}})</script>
</html>
3、ref在v-for中的使用
<div class="area"
//Citys是一个数组，里面是对象v-for="(item,key) of Citys" :key="key":ref="key"><div class="title">{{key}}</div><ul class="item-list"><li class="border-bottom" v-for="item1 of item":key="item1.id">{{item1.name}}</li></ul></div>
在js代码中我这样写
const element=this.$refs[this.letter];这里的letter是一个数据，这个数据是ref中的一个，最后得到的结果是一个数组
如果我们想得到这个DOM元素怎么获取呢？我们可以在后面加个[0]
const element=this.$refs[this.letter][0]
console.log(element)
也就是说相当于一个二维数组，第一个就是这个DOM元素
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！