Vue3组合式API：打造可复用动态表单组件

技术教程壹维导航

1 0 0

融网址资源资讯于一体免费基础功能学生党福音轻量化办公流畅不卡顿 100元/月

Vue3组合式API实现可复用的动态表单组件

在Vue3中，组合式API（Composition API）为构建可复用组件提供了更灵活的方式。动态表单组件是许多应用场景中的核心需求，本文将详细介绍如何使用组合式API实现一个高度可复用的动态表单组件。

1. 组件设计思路

动态表单组件的核心在于根据配置动态生成表单字段。我们需要实现以下功能：

支持多种表单类型（输入框、选择框、日期选择器等）
动态表单验证规则
表单数据双向绑定
可复用的表单项布局

2. 实现步骤

步骤1：定义表单项配置接口

首先创建一个TypeScript接口来规范表单项的配置结构：

interface FormItemConfig {
  type: \'input\' | \'select\' | \'date\' | \'textarea\';
  label: string;
  model: string;
  placeholder?: string;
  options?: { label: string; value: string }[]; // 用于选择框
  rules?: { required?: boolean; message?: string; trigger?: \'blur\' | \'change\' }[];
}

步骤2：创建组合式函数

使用组合式API封装表单逻辑：

import { ref, reactive } from \'vue\';

export function useForm(configs: FormItemConfig[]) {
  const formData = reactive({});
  const formErrors = reactive({});
  
  // 初始化表单数据
  configs.forEach(config => {
    formData[config.model] = \'\';
  });

  // 验证单个字段
  const validateField = (model: string) => {
    const config = configs.find(item => item.model === model);
    if (!config?.rules) return true;
    
    for (const rule of config.rules) {
      if (rule.required && !formData[model]) {
        formErrors[model] = rule.message || \'该字段不能为空\';
        return false;
      }
    }
    delete formErrors[model];
    return true;
  };

  // 验证整个表单
  const validateForm = () => {
    let isValid = true;
    configs.forEach(config => {
      if (!validateField(config.model)) {
        isValid = false;
      }
    });
    return isValid;
  };

  return {
    formData,
    formErrors,
    validateField,
    validateForm
  };
}

步骤3：构建动态表单组件

使用配置渲染动态表单项：

<template>
  <div class=\"dynamic-form\">
    <div v-for=\"item in configs\" :key=\"item.model\" class=\"form-item\">
      <label>{{ item.label }}</label>
      <input
        v-if=\"item.type === \'input\'\"
        v-model=\"formData[item.model]\"
        @blur=\"() => validateField(item.model)\"
        :placeholder=\"item.placeholder\"
      />
      <select
        v-else-if=\"item.type === \'select\'\"
        v-model=\"formData[item.model]\"
        @change=\"() => validateField(item.model)\"
      >
        <option value=\"\">请选择</option>
        <option
          v-for=\"option in item.options\"
          :key=\"option.value\"
          :value=\"option.value\"
        >
          {{ option.label }}
        </option>
      </select>
      <span v-if=\"formErrors[item.model]\" class=\"error\">{{ formErrors[item.model] }}</span>
    </div>
  </div>
</template>

<script setup>
import { useForm } from \'./useForm\';

const props = defineProps({
  configs: {
    type: Array,
    required: true
  }
});

const { formData, formErrors, validateField } = useForm(props.configs);
</script>

3. 使用示例

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

<template>
  <DynamicForm :configs=\"formConfigs\" @submit=\"handleSubmit\" />
</template>

<script setup>
import { ref } from \'vue\';
import DynamicForm from \'./DynamicForm.vue\';

const formConfigs = [
  {
    type: \'input\',
    label: \'用户名\',
    model: \'username\',
    rules: [{ required: true, message: \'请输入用户名\' }]
  },
  {
    type: \'select\',
    label: \'角色\',
    model: \'role\',
    options: [
      { label: \'管理员\', value: \'admin\' },
      { label: \'普通用户\', value: \'user\' }
    ],
    rules: [{ required: true, message: \'请选择角色\' }]
  }
];

const handleSubmit = () => {
  // 处理表单提交逻辑
};
</script>