1. 首页
  2. VUE

vue中ref的使用

一、ref有如下三种用法:

ref 加在普通的元素上,用 this.$refs.name 获取到的是dom元素; 

ref 加在子组件上,用 this.$refs.name 获取到的是子组件实例,父组件可以使用子组件的所有方法(在上篇博客已介绍); 

如何利用 v-for 和 ref 获取一组数组或者dom 节点

二、注意点

1、ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用

2、如果ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。

三、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)
},

本文来自挚友阳光,本站一部分文章不代表本站立场,不妥请联系本站删除,如若转载,请注明出处:https://www.linstudy.com/article/93.html