ref:被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs上,如果在普通的DOMM元素上使用,那么就是指向普通的DOM元素。

ref的三种用法:
1、ref加在普通元素上,用this. r e f s . n a m e 或 者 t h i s . refs.name或者this. refs.namethis.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.namethis.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:'<div>我是组件</div>'
		})
		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元素

Logo

前往低代码交流专区

更多推荐