前言
例如:之前在vue2时,要使用某个dom节点的属性和方法就需要使用,this.$refs.domName去拿到属性和方法,但是在vue3中没有了this,需要使用到ref()
方法
以表单验证为案例:
<template>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
//中间内容省略
<el-form-item>
<el-button
type="primary"
class="login-btn"
@click="handleSubmitLogin(loginFormRef)"
>
登录
</el-button>
</el-form-item>
</el-form>
</template>
<script setup>
import { ref} from 'vue'
const loginFormRef = ref(null) //这里就是拿到loginFormRef 的dom
//第一种直接使用
const handleSubmitLogin = ()=>{
console.log(loginFormRef);//这里就能拿到loginFormRef 节点的属性和方法了
//注意这里一定要是loginFormRef.value.他的属性和方法,因为是ref()定义的数据
loginFormRef.value.validate((valid,fields)=>{
if (valid) {
console.log('success submit!')
} else {
console.log('error submit!', fields)
}
})
}
//第二种loginFormRef 作为参数使用
const handleSubmitLogin = (formEl)=>{
console.log(formEl);//这里就能拿到loginFormRef 节点的属性和方法了,少了一层value包裹
//注意这里就可以直接使用了
formEl.validate((valid,fields)=>{
if (valid) {
console.log('success submit!')
} else {
console.log('error submit!', fields)
}
})
}
</script>