Vue中ref（$ref）用法

ref有三种用法：

1. ref加在普通元素上，用this.$refs.name获取到的是dom元素；
2. ref加在子组件上，用this.$refs.name获取到的是组件实例，可以使用组件的所有方法，获取组件的所有值；
3. 利用v-for和ref获取一组数组或者dom节点；

应注意的点：

1. 如果通过v-for遍历想加不同的ref时，需要加：号，即:ref=“某变量”。这点和其他属性是一致的，如果是固定值就不需要加：号，如果是变量记得加：号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String）)
2. 通过:ref=某变量添加ref（即加了：号），如果想获取该ref时需要加[0],如this.refs[refsArrayItem][0];如果不是:ref=某变量的方式而是ref=某字符串时则不需要加，如this.refs[refsArrayItem]。
3. ref需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期mounted(){}钩子中调用，或者在this.$nextTick(()=>{})中调用。
4. 如果ref是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref只需要循环就可以了。

使用示例：

添加ref属性

<div id="app">
	<h1 ref="hello">这是H1</h1>
	<world ref="wooo">这是world</h1>
	
	<buttton @click="getref">获取H1元素</button>
</div>

获取注册过的ref的所有组件或元素

methods:{
	getref(){
		//表示从$ref对象中，获取ref属性值为：hello DOM元素或组件
		console.log(this.$refs.hello.innerText)   //这是H1
		this.$refs.hello.style.color='red'  //修改HTML样式
		
		console.log(this.$refs.wooo.msg)  //获取组件数据
		console.log(this.$refs.wooo.test())  //获取组件的方法
	}
}