loginRef是什么

代码中，ref="loginRef" 创建了一个名为 loginRef 的引用，它指向当前的 <el-form> 元素。之后，你可以通过 this.$refs.loginRef 来访问这个 <el-form> 元素或其相关的数据和方法。

const loginRef = ref(null)

<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
    <h3 class="title">java456(陈豪) Vue3 后台管理系统</h3>

    <!--    prop="username" 是验证规则  const loginRules  进行验证的。 -->
    <el-form-item prop="username">

        <el-input
                v-model="loginForm.username"
                type="text"
                size="large"
                auto-complete="off"
                placeholder="账号"
        >
            <template #prefix><svg-icon icon="user" /></template>
        </el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input
                v-model="loginForm.password"
                type="password"
                size="large"
                auto-complete="off"
                placeholder="密码"
                @keyup.enter="handleLogin"
        >
            <template #prefix><svg-icon icon="password" /></template>
        </el-input>
     </el-form-item>


    <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>

    <el-form-item style="width:100%;">
        <el-button
                size="large"
                type="primary"
                style="width:100%;"
                @click.prevent="handleLogin"
        >
            <span>登 录</span>
         </el-button>

    </el-form-item>
</el-form>


表单验证
this.$refs.loginRef.validate((valid) => {  
if (valid) {  
// 表单验证通过，执行登录逻辑  
this.handleLogin();  
  } else {  
// 表单验证失败，显示错误信息或进行其他处理  
  }  
});

访问属性值。
const username = this.$refs.loginRef.loginForm.username;  

console.log(username); // 输出用户名

   rules  rule  自定义验证方法 验证策略    

const rules=ref({
    username:[
        { required: true, message: '请输入用户名'},
        { required: true, validator: checkUsername, trigger: "blur" }
    ],
    email: [{ required: true, message: "邮箱地址不能为空", trigger: "blur" }, 
    { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
    phonenumber: [{ required: true, message: "手机号码不能为空", trigger: "blur" }, 
    { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
})


const checkUsername = async (rule, value, callback) => {
    if(form.value.id==-1){
        const res=await requestUtil.post("sys/user/checkUserName",{username:form.value.username});
        if (res.data.code==500) {
            callback(new Error("用户名已存在！"));
        } else {
            callback();//不做任何处理。
        }
    }else{
        callback();
    }

}

生命周期

<template>
  <div>
    <!-- 组件的模板部分 -->
  </div>
</template>
 
<script setup>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
 
// 在组件挂载之前调用
onBeforeMount(() => {
  console.log('beforeMount');
});
 
// 在组件挂载完成后调用
onMounted(() => {
  console.log('mounted');
});
 
// 在数据更新之前调用
onBeforeUpdate(() => {
  console.log('beforeUpdate');
});
 
// 在数据更新之后调用
onUpdated(() => {
  console.log('updated');
});
 
// 在组件卸载之前调用
onBeforeUnmount(() => {
  console.log('beforeUnmount');
});
 
// 在组件卸载之后调用
onUnmounted(() => {
  console.log('unmounted');
});
</script>

路径说明   引入文件的路径   含义 

目录含义  路径含义
 
 
./相当于    同一级
 ../表示   上一级  
@/表示   根目录