vue3 element from表单

vue3 里面完成不支持this，所有我再开发当中，看不见this了，3.0使用setup()以后不存在this，里面的model以及rules校验，最后的提交都跟之前有所不同，刚刚看起来确实有点不习惯了。

<template>
    <div>
        <h1>login</h1>
  <el-form 
  :model="ruleForm" 
  status-icon 
  :rules="rules" 
  ref="refruleForm" 
  label-width="100px" 
  class="demo-ruleForm">
  <el-form-item label="账户" prop="username">
    <el-input type="text" v-model="ruleForm.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model.number="ruleForm.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>
   
  </el-form-item>
</el-form>
    </div>
</template>
<script>

//
import {reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
// 引入路由 useRouter  后面带了一个r

export default {
name:'login',
setup(){
const router = useRouter();
//定义·表单输入框信息
    const ruleForm = reactive({         
                username:"",
                password:""
    });



//定义校验规则 表单代码中必须以 :rules 接收

   const rules = {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
    };

// vue3 ref 获取方式 
const  refruleForm=ref(null);

//确定按钮的格式
 const submitForm=()=> {
     console.log('ruleForm----',ruleForm)
        refruleForm.value.validate((valid) => {
            console.log(valid)
          if (valid) {
            console.log('submit!');
           router.push('/')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }


    return{
         ruleForm,
         refruleForm,
         rules,
         submitForm
    }

}

}
</script>

<style scoped>

</style>