vue中ref与$refs详解

最新推荐文章于 2024-09-23 10:09:01 发布

前端分享会

最新推荐文章于 2024-09-23 10:09:01 发布

阅读量5.2k

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43905830/article/details/105878843

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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>