ref 作用

ref 用来给元素或子组件注册引用信息。

引用信息将会注册在父组件的 $refs 对象上。

• 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素
• 如果用在 子组件 上，引用就指向组件实例

一句话理解

相当于标签的 id 属性，通过该属性可以获取该标签的DOM

$refs 作用

通过 $refs 可以获取到 ref 指定的元素

应用场景

非空校验时，让控件获取焦点

例子

<template>
    <div>
        <h1>登录</h1><br>
        用户名：<input ref="username" v-model="username" placeholder="请输入用户名"> 通过 ref 注册引用 <br>
        密码：<input ref="password" v-model="password" placeholder="请输入密码" type="password"><br>

        <input type="button" value="登录" @click='login()'>
        <div style="color:red;">{{msg}}</div>
    </div>
</template>
<script>
export default {
    data:function(){

        return {
            username:'',
            password:'',
            msg:''
        }
    },
    methods:{
        login:function(){
            if( this.username ===""){
                this.msg="请输入登录名！"
                //通过 $refs 获取 ref设置的 username
                this.$refs.username.focus()
                return
            }

            if( this.password ===""){
                this.msg="输入密码！"
                //通过 $refs 获取 ref设置的 password
                this.$refs.password.focus()
                return
            }
            this.msg=""
            console.log("username:",this.username)
            console.log("password:",this.password)
        }
    }

}
</script>

原文出处：/show_1IX2pWHIdY4R.html