vue3 封装form 表单嵌套表单

在 Vue 3 中，封装 form 表单和嵌套表单通常是为了提高代码的复用性和组织结构清晰度。Vue 的响应式特性使得数据绑定和管理变得简单，而 Element UI 或者自定义的 Form 组件可以帮助我们处理复杂的表单结构。

以下是一个简单的例子，展示了如何封装一个基础的嵌套表单组件：

<template>
  <div ref="form">
    <!-- 外层 form -->
    <el-form :model="parentForm" :rules="parentRules">
      <el-row>
        <!-- 子表单 -->
        <child-form v-model="parentForm.nestedForm"></child-form>
      </el-row>
      <el-button type="primary" @click="submit">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import ChildForm from '@/components/ChildForm.vue'; // 假设这是你的子表单组件

export default {
  components: { ChildForm },
  data() {
    return {
      parentForm: {
        nestedForm: {},
      },
      parentRules: {} // 规则配置
    };
  },
  methods: {
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 提交数据到服务器或其他操作
          console.log(this.parentForm);
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
};
</script>

在这个例子中，`ChildForm` 是一个独立的组件，可以接收 `v-model` 属性，将数据双向绑定。`parentForm` 对象包含了嵌套的 `nestedForm`。当你点击“提交”按钮时，会调用 `validate` 方法进行校验，并在校验通过后处理表单数据。