vue中ref的用法

1、ref加在普通元素上，用this.$refs.refName获取dom元素

//定义的myComponent.vue
<button @click="clickF">边界值练习</button>
<input type="text"
        ref="input"
        :value="value"
        @focus="myfocus"
        @input="$emit('input',$event.target.value)">

data(){
	return {
		value: 'value'
	}
}

在methods中：
clickF() {
            console.log(this.$refs.input)    //<input type="text">
        }

2、加在子组件上，使用this.$refs.refName获取组件实例，可以使用组件的所有方法和变量

//子组件在父组件中被调用
<myComponent
    ref="myinput"
    v-model="keywords"/>
    <p>{{keywords}}</p>
    <button @click="submit">提交</button>

methods：{
	submit() {
	//value实在子组件中定义的data变量
      console.log(this.$refs.myinput.value)  //value
    },
}

3、利用v-for和ref获取一组数组或者DOM节点，

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

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

	<ul>
    	<li ref="myLi" v-for="(item,index) in person" :key="index">{{item}}</li>
    </ul>

	data(){
		return {
			person:['三姑','四姨','五姨','六姨','八姑']
		}
	}


	created() {
        this.$nextTick(() => {
            console.log(this.$refs.myLi)
        })
    },

更加具体的内容：https://www.cnblogs.com/goloving/p/9404099.html)