Vue2中ref属性的使用方法

一.了解ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。

1.如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

<template>
    <div>
        <input type="text" ref="inp" id="inp"/>
        <button @click="add">添加</button>
    </div>
</template>
<script>
export default {
	methods:{
		add:function(){
			this.$refs.inp.value='22';
			console.log(this.$refs.inp);
		}
	}
}
</script>

从上面的列子可以看出，inp的引用信息为inp ，$refs 是所有注册过的ref的一个集合，

console.log(this.$refs.inp)//<input type="text" id="inp">
console.log(document.getElementById('inp'))//<input type="text" id="inp">
 这两种方法获得的都是Dom节点，而$refs相对document.getElementById的方法，会减少获取dom节点的消耗。

2.如果用在子组件上，引用就指向组件实例：

尽管有 prop 和事件，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个引用 ID。例如：

<template>
    <div>
        <input type="text" ref="inp" id="inp"/>
        <button @click="add">添加</button>
        <child ref="childs"></child>
    </div>
</template>
<script>
import Vue from 'vue';  
Vue.component('child',{
	template:"<div>我是一个child组件！ </div>"
})
export default {
	methods:{
		add:function(){
			this.$refs.inp.value='22';
			console.log(this.$refs.inp);
			console.log(this.$refs.childs);
		}
	}
}
</script>

3.与for连用的时候

当 ref 和 v-for 一起使用时，获取到的引用会是一个数组，包含和循环数据源对应的子组件。

<template>
    <div>
        <input type="text" ref="inp" id="inp"/>
        <button @click="add">添加</button>
        <child ref="childs"></child>
        <ul v-for="item in list">
        	<li  ref="refContent">姓名：{{item.name}}，年龄：{{item.age}}</li>
        </ul>
    </div>
</template>
<script>
import Vue from 'vue';  
Vue.component('child',{
	template:"<div>我是一个child组件！ </div>"
})
export default {
	data() {
		return{
			list:[{name:'小高',age:18},{name:'小吴',age:20},{name:'小陈',age:23}]
		}
    },
    mounted() {
		console.log(this.$refs.refContent);
    },
	methods:{
		add:function(){
			this.$refs.inp.value='22';
			console.log(this.$refs.inp);
			
		}
	}
}
</script>