vue 实现表单

Vue 表单实现方法

Vue 提供了多种方式实现表单，包括数据绑定、表单验证和动态表单生成。

基础表单绑定

使用 v-model 指令实现表单元素与 Vue 实例数据的双向绑定：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.username" type="text" placeholder="用户名">
    <input v-model="formData.password" type="password" placeholder="密码">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      console.log('提交数据:', this.formData)
    }
  }
}
</script>

表单验证

Vue 结合验证库如 VeeValidate 实现表单验证：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="email" type="email" placeholder="邮箱">
    <span v-if="errors.email">{{ errors.email }}</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { useField, useForm } from 'vee-validate'
import * as yup from 'yup'

export default {
  setup() {
    const schema = yup.object({
      email: yup.string().required().email()
    })

    const { handleSubmit, errors } = useForm({
      validationSchema: schema
    })

    const { value: email } = useField('email')

    const handleSubmit = handleSubmit(values => {
      console.log('验证通过:', values)
    })

    return { email, errors, handleSubmit }
  }
}
</script>

动态表单生成

通过 v-for 动态生成表单字段：

<template>
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in formFields" :key="index">
      <label>{{ field.label }}</label>
      <input 
        v-model="formData[field.name]" 
        :type="field.type" 
        :placeholder="field.placeholder">
    </div>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { name: 'username', type: 'text', label: '用户名', placeholder: '输入用户名' },
        { name: 'email', type: 'email', label: '邮箱', placeholder: '输入邮箱' }
      ],
      formData: {}
    }
  },
  methods: {
    handleSubmit() {
      console.log('表单数据:', this.formData)
    }
  }
}
</script>

表单组件封装

将表单封装为可复用组件：

<!-- FormComponent.vue -->
<template>
  <form @submit.prevent="$emit('submit', formData)">
    <slot :formData="formData" :updateFormData="updateFormData"></slot>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  props: {
    initialData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formData: { ...this.initialData }
    }
  },
  methods: {
    updateFormData(key, value) {
      this.formData[key] = value
    }
  }
}
</script>

使用封装的表单组件：

<template>
  <FormComponent @submit="handleSubmit">
    <template v-slot="{ formData, updateFormData }">
      <input 
        :value="formData.username" 
        @input="updateFormData('username', $event.target.value)"
        placeholder="用户名">
    </template>
  </FormComponent>
</template>

<script>
import FormComponent from './FormComponent.vue'

export default {
  components: { FormComponent },
  methods: {
    handleSubmit(formData) {
      console.log('提交数据:', formData)
    }
  }
}
</script>

这些方法覆盖了 Vue 表单实现的主要场景，可根据具体需求选择适合的方式。