Vue中$refs的简单语法使用

$refs的简单用法

1：$refs可以用于简单的元素绑定，用this.$refs.(值)进行简单的获取

<div class="id">
<home ref="home">132</home>

<button @click="get"></button>
</div>

method: {
    get() {
        console.log(this.$refs.home.msg)//获取组件的数据
        console.log(this.$refs.home.test) //获取组件方法
    }
}

2：$refs可以用于表单数据的绑定,要与v-model绑定使用

<el-form label-width="80px" :model="LoginForm" ref="LoginForm">
    <el-form-item label="用户名">
        <el-input v-model="LoginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码">
        <el-input v-model="LoginForm.password"></el-input>
    </el-form-item>
    <el-form-item class="Login">
        <el-button type="primary" @click="login('LoginForm')">登录</el-button>
    </el-form-item>
</el-form>

    methods: {
        login(LoginForm) {
            console.log(this.$refs.LoginForm)//获取表单的相关内容
            console.log(this.$refs.LoginForm.validate())//获取表单的验证相关的内容
           
    }