vue3中我们无法使用this，无法通过this.$refs去获得绑定的ref。所以需要导入使用，方法如下：

.js文件中定义数据和方法

// 导入
import { reactive, ref } from "vue";
// 定义表单绑定的ref
export const loginForm = ref(null);
// 定义初始化数据
export let loginData = reactive({
    loginForm: {
        userPhone: "", 
    },
    loginRules: {
        userPhone: [
            {
                required: true,
                trigger: "blur",
                message: "请输入用户名",
            },
        ],
    },
})
// 表单验证方法 
export const handleLogin = () => {
    loginForm.value.validate((valid) => {
        if (valid) {
            console.log("验证通过");
        } else {
            console.log("验证失败");
        }
    });
}

.vue文件中使用

<template>
  <el-form
    ref="loginForm"
    :model="loginData.loginForm"
    :rules="loginData.loginRules"
    label-width="120px"
  >
    <el-form-item label="用户名" prop="userPhone">
      <el-input
        v-model="loginData.userPhone"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleLogin">提交</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
// 导入定义的ref和方法
import { loginData, loginForm, handleLogin } from "./text";
export default {
  setup() {
    return {
      loginData,
      loginForm,
      handleLogin,
    };
  },
};
</script>

这里是将代码抽离出来，有利于重复使用与后期维护，也可用直接书写在vue文件中。