Vue3的表单事件优雅写法

J小C=

已于 2023-06-23 16:46:14 修改

阅读量725

点赞数

分类专栏： vue Vue3.0 TS 文章标签：前端 typescript 前端框架

于 2023-06-14 16:19:59 首次发布

本文链接：https://blog.youkuaiyun.com/css_javascrpit/article/details/131210027

版权

Vue3.0 同时被 3 个专栏收录

10 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

2 篇文章

订阅专栏

文章介绍了在Vue3中使用Element-Plus组件库时，如何通过ref.value更简洁地处理表单验证和重置操作，对比了传统传参方式的繁琐，强调了新方法的简洁性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为V3对TS支持性很高，所以一些组件或者写法都没有V2自由，比如前端的基本功：表单事件，在 Element-Plus 组件库中可以看到

<template>
 <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
 <el-form-item>
     <el-button type="primary" @click="submitForm(ruleFormRef)">
      校验
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
    </el-form-item>
</el-form>
</template>
<script lang="ts" setup>
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({})const rules = reactive<FormRules>({})
    const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.resetFields()
    }

</script>

这是我从组件库扒过来的简易版，从这里可以看到这个我们常用的校验方法和表单清空方法太麻烦了，还要传一个 ref，起来就很麻烦，所以我找到了一个新的方法去解决这个问题，自由度和V2差不多那就是 ref.value?.XXX() ,就上面代码举个例子

   const submitForm  = async() => {
     if (!ruleFormRef) return
        const valid = await ruleFormRef.value.validate()
        if (!valid) return
    }
    const resetForm = async() => {
        ruleFormRef.value?.resetFields()
    }

用这种表单方法的写法，第一更简洁，不会有多余的代码，可读性也更好，也不需要传参，在我这个之前一直用V2去开发项目的码农来说，我更喜欢这种，通俗易懂。