refvar java,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元素

mounted(){

this.$refs.inputRef.focus();

}

//或者

created(){

this.$nextTick(()=>{

this.$refs.inputRef.focus();

})

},

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

(1)形式一：动态绑定ref

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使用固定值

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)

},