vue3在＜script setup＞时使用element-plus的一些变动

前言
vue.js在使用element组件是，一般是下面这种方式进行声明和事件的操作，在vue3中也可以这样写，由于我比较喜欢 <script setup> 这种写法，所以下面这种方法行不通，而官方也没有贴出具体代码

 export default {
    data() {
      return {
      
      }
    },
    methods: {
     
    },
  }

正文
这里我没有引入reactive和ref，在 unplugin-auto-import的使用 这篇文章内有详细使用方式
在template里面的内容和官方文档一样,在script中有所改变

  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleFormRef"
    label-width="100px"
    class="demo-ruleForm"
  >
  </el-form>

对用到的变量进行声明

const ruleForm = reactive({
  name: "",
});

对用到的操作事件进行声明

var submitForm = () => {
  ruleFormRef.value.validate((valid) => {
    console.log("valid", valid);
    if (valid) {  
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};

用到的正则验证和官方文档一致

const rules = reactive({
  name: { required: true, message: "请输入活动名称", trigger: "change" },
});

本文初衷是为了作者以后便与查找该方法，有好的方法欢迎指正，