Vue3组合式API：动态表单组件实战指南

技术教程壹维导航

1 0 0

Vue3组合式API实现动态表单组件

在现代化前端开发中，动态表单组件是常见的需求场景。Vue3的组合式API（Composition API）为构建灵活可复用的表单组件提供了强大的支持。本文将详细介绍如何使用组合式API实现一个功能完善的动态表单组件。

1. 组件设计思路

动态表单组件的核心在于根据配置动态生成表单字段。设计时需要考虑以下要点：

支持多种表单控件类型（输入框、选择器、开关等）
提供表单验证功能
支持表单字段的动态增减
实现表单数据的双向绑定

2. 基础结构搭建

首先创建一个DynamicForm.vue组件，使用setup函数编写组合式API逻辑：

<template>
  <form @submit.prevent=\"handleSubmit\">
    <div v-for=\"field in fields\" :key=\"field.name\">
      <label>{{ field.label }}</label>
      <input 
        v-if=\"field.type === \'text\'\" 
        v-model=\"formData[field.name]\" 
        :rules=\"field.rules\"
      />
      <select 
        v-else-if=\"field.type === \'select\'\" 
        v-model=\"formData[field.name]\"
      >
        <option v-for=\"option in field.options\" :value=\"option.value\">
          {{ option.label }}
        </option>
      </select>
    </div>
    <button type=\"submit\">提交</button>
  </form>
</template>

<script setup>
import { reactive } from \'vue\'

const props = defineProps({
  fields: Array,
  initialValues: Object
})

const emit = defineEmits([\'submit\'])

const formData = reactive({...props.initialValues})
</script>

3. 实现表单验证

使用组合式API可以优雅地实现表单验证。创建一个useFormValidation函数：

const useFormValidation = (fields, formData) => {
  const errors = reactive({})
  
  const validate = () => {
    let isValid = true
    fields.forEach(field => {
      if (field.rules) {
        field.rules.forEach(rule => {
          if (!rule.validator(formData[field.name])) {
            errors[field.name] = rule.message
            isValid = false
          } else {
            delete errors[field.name]
          }
        })
      }
    })
    return isValid
  }
  
  return { errors, validate }
}

4. 动态字段处理

对于需要动态增减字段的场景，可以这样实现：

const addField = (fieldConfig) => {
  fields.value.push({
    name: fieldConfig.name,
    label: fieldConfig.label,
    type: fieldConfig.type || \'text\',
    rules: fieldConfig.rules || []
  })
  formData[fieldConfig.name] = fieldConfig.defaultValue || \'\'
}

const removeField = (fieldName) => {
  const index = fields.value.findIndex(f => f.name === fieldName)
  if (index > -1) {
    fields.value.splice(index, 1)
    delete formData[fieldName]
    delete errors[fieldName]
  }
}

5. 完整组件实现

将上述功能整合起来，最终组件代码如下：

<script setup>
import { reactive } from \'vue\'

const props = defineProps({
  fields: Array,
  initialValues: Object
})

const emit = defineEmits([\'submit\', \'field-change\'])

const formData = reactive({...props.initialValues})
const { errors, validate } = useFormValidation(props.fields, formData)

const handleSubmit = () => {
  if (validate()) {
    emit(\'submit\', formData)
  }
}

const handleChange = (field, value) => {
  formData[field] = value
  emit(\'field-change\', field, value)
}
</script>

6. 使用示例

在父组件中使用动态表单：

<template>
  <DynamicForm 
    :fields=\"formFields\" 
    :initial-values=\"initialValues\"
    @submit=\"handleSubmit\"
    @field-change=\"handleFieldChange\"
  />
</template>

<script setup>
const formFields = [
  { name: \'username\', label: \'用户名\', rules: [{ validator: v => v.length > 3, message: \'用户名至少3个字符\' }] },
  { name: \'role\', label: \'角色\', type: \'select\', options: [{ label: \'管理员\', value: \'admin\' }, { label: \'普通用户\', value: \'user\' }] }
]

const handleSubmit = (data) => {
  console.log(\'表单提交:\', data)
}
</script>