vue3如何使用ref(表单验证为例)

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文件中使用

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