vue中ref的用法

1、ref有以下三種用法：

• ref 加在普通的元素上，用 this.$refs.name 獲取到的是dom元素；
• ref 加在子組件上，用 this.$refs.name 獲取到的是子組件實例，父組件能夠使用子組件的全部方法(在上篇博客已介紹)；
• 如何利用 v-for 和 ref 獲取一組數組或者dom 節點

2、注意點

一、ref 須要在dom渲染完成後纔會有，在使用的時候確保dom已經渲染完成。好比在生命週期 mounted(){} 鉤子中調用，或者在 this.$nextTick(()=>{}) 中調用。

二、若是ref 是循環出來的，有多個重名，那麼ref的值會是一個數組 ，此時要拿到單個的ref 只須要循環就能夠了。

3、ref 的用法

1.加在普通元素上，獲取dom元素

<input type="text" ref="inputRef"/>

mounted(){
  this.$refs.inputRef.focus();
}

//或者
created(){
	this.$nextTick(()=>{
	  this.$refs.inputRef.focus();
	})
},

2.v-for 和 ref,獲取dom元素

（1）形式一：動態綁定ref

<div v-for="(item,index) in user" v-bind:key="index" v-bind:ref="'dom'+index" @click="getdom(index)">{{item.name}}</div>

data(){
  return {
	user:[
		{name:"小花",age:18},
		{name:"小黃",age:19},
		{name:"小藍",age:20},
	]
 }
},

getdom(index){
	var r = "dom"+index;
	var s = this.$refs[r][0].innerHTML;
	console.log(s)
},

（2）形式二：ref使用固定值

<div v-for="(item,index) in user" v-bind:key="index" ref="dom" @click="getdom(index)">{{item.name}}</div>

data(){
  return {
	user:[
		{name:"小花",age:18},
		{name:"小黃",age:19},
		{name:"小藍",age:20},
	]
 }
},

getdom(index){
	//此時this.$refs.dom是一個數組
	var s = this.$refs.dom[index].innerHTML;
	console.log(s)
},