uView 子表单：嵌套表单结构和数据管理

uView 中的子表单可以用于在表单内部嵌套表单，以便更好地组织表单数据和布局。

在 uView 中，子表单可以通过在父表单中引用一个组件来实现。在父表单组件内部，可以使用``组件来包裹子表单组件，并通过`prop`属性指定子表单组件的`model`属性。例如：

<template>
  <u-form :model="form">
    <u-form-item label="父表单字段1">
      <u-input v-model="form.field1"></u-input>
    </u-form-item>
    <u-form-item label="父表单字段2">
      <u-input v-model="form.field2"></u-input>
    </u-form-item>
    <u-form-item label="子表单">
      <child-form :model="form.child"></child-form>
    </u-form-item>
  </u-form>
</template>

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

  export default {
    components: {
      ChildForm
    },
    data() {
      return {
        form: {
          field1: '',
          field2: '',
          child: {
            childField1: '',
            childField2: ''
          }
        }
      }
    }
  }
</script>

在上面的示例中，`child-form`组件是子表单组件，它的`model`属性由父表单组件的`form.child`属性指定。在父表单组件内部，`child-form`组件被包裹在一个``组件中，通过`label`属性指定了子表单的标题。在子表单组件内部，可以定义自己的表单字段和布局，以便更好地组织数据。

需要注意的是，子表单组件的`model`属性必须使用`prop`方式传递，而不能使用`v-model`。在子表单组件内部，可以通过`this.$emit('update:model', data)`方式来修改父表单组件中的`model`属性。例如：

<template>
  <u-form :model="model">
    <u-form-item label="子表单字段1">
      <u-input v-model="childField1"></u-input>
    </u-form-item>
    <u-form-item label="子表单字段2">
      <u-input v-model="childField2"></u-input>
    </u-form-item>
  </u-form>
</template>

<script>
  export default {
    props: {
      model: {
        type: Object,
        required: true
      }
    },
    computed: {
      childField1: {
        get() {
          return this.model.childField1
        },
        set(value) {
          this.$emit('update:model', {
            ...this.model,
            childField1: value
          })
        }
      },
      childField2: {
        get() {
          return this.model.childField2
        },
        set(value) {
          this.$emit('update:model', {
            ...this.model,
            childField2: value
          })
        }
      }
    }
  }
</script>

在上面的示例中，子表单组件的`model`属性由父表单组件通过`prop`方式传递。子表单组件内部定义了两个计算属性`childField1`和`childField2`，分别用于读取和修改`model`属性中的子表单字段。在`set`函数中，通过`this.$emit('update:model', data)`方式将修改后的数据传递给父表单组件。这样，当子表单组件中的数据发生变化时，父表单组件的`model`属性也会随之更新。