1、Vue中的ref 和$refs的区别

ref

以标签属性 的形式存在，接收String参数。
ref 被用来给元素或者子组件注册引用信息，
分为两种情况：
1、如果在普通的DOM元素上使用，引用指向的就是真实的DOM元素
2、如果用在子组件上，引用则指向的是组件实例对象

$refs

以对象的方式存在，表示持有ref属性的所有组件
该对象对应着ref属性：
1、如果ref是在普通的标签上，则$ref指向的就是该DOM元素
2、如果ref是在子组件上，则指向的是该组件的实例对象。

2、使用

代码演示

<template>
	<input type = "text" value = "" ref = 'input'> <!--ref作为属性存在，接收一个字符串作为标识符-->
	<button @click = 'show()'>展示input中的数据</button><!--展示输入的数据-->
</template>

<script>
	name:'show',
	methods:{
		show(){
			alert(this.$refs.input.value);
			//得到this.$refs对象中input标识符所在的标签实例对象，并输出标签的value值
		}
	},
</script>

结果：

输入框输入：这是ref的使用演示
点击按钮后输出：这是ref的使用演示

3、ref结合v-for的特殊使用

v-for用于遍历数组或者对象，标签只用写一次，大大的简化的代码的冗余

<ul> 
	<li v-for = '(item,index) in array' :key = 'index'> {{item}} </li>
</ul>

但是，由于动态的遍历标签，所以就无法拿到指定的标签，这里ref有起到的不可代替的作用

代码

<template>
	<ul>
		<li v-for='(item,index) in array' :key = 'index' ref = 'li'> <!--遍历数组并将所有标签都绑定ref属性-->
		{{item}}
		<button @click = 'getli(index)'>显示数据</button> <!--方法响应-->
		</li>
	</ul>
</template>

<script>
	name:'show',
	data(){
		return{
			array:['包子','馒头','油条','豆浆','牛奶','面包'],
			//需要遍历显示的内容，用数组的形式存放
		}
	},
	methods:{
		getli(index){
			let li = this.$refs.li; //得到$refs对象中所有的li标识符所在的标签实例对象
			//此时的局部变量li为一个数组，存放的是所有的li标签实例对象
			alert(li[index].innerText);//取得指定的li对象，输入内部的值
		}
	},
</script>

4、总结

this.$refs.tagName 等同于 document.getElementsByClass('className');

$refs只在组件渲染完成后才填充，并且它并非响应式，它只是一个直接操作标签或者组件的应急方案，我们应该在开发中尽量少的使用它