vue3-setup语法糖之如何使用ref属性

前言

例如：之前在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>

---