uView中子表单

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

在uView中，子表单可以通过在父表单中引用一个组件来实现。在父表单组件内部，可以使用<u-form-item>组件来包裹子表单组件，并通过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组件被包裹在一个<u-form-item>组件中，通过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属性也会随之更新。