vue中ref与$refs详解

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs上，如果在普通的DOMM元素上使用，那么就是指向普通的DOM元素。ref的三种用法：1、ref加在普通元素上，用this.refs.name或者this.refs.name或者this.refs.name或者this.refs[‘name’]获取的1是DOM元素<!DOCTYPE html><h...

前端分享会

5221人浏览 · 2020-05-01 20:13:03

前端分享会 · 2020-05-01 20:13:03 发布

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

ref的三种用法：
1、ref加在普通元素上，用this. $r e f s . n a m e 或者 t h i s .$ 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’]获取的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元素

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^