vue项目中循环遍历公共表单组件，怎么获取公共表单组件中的数据

在 Vue 项目中循环遍历公共表单组件，可以使用 props 传递数据和事件，然后在公共表单组件中使用 $emit 发送事件，将表单数据传递给父组件。具体的实现步骤如下：

1. 在父组件中定义一个表单数据对象 formData 和一个表单项数组 formList，表单项数组中的每个元素都是一个对象，包含表单项的类型、名称、标签、值等信息。

2. 在父组件中循环遍历表单项数组 formList，根据每个表单项的类型渲染对应的公共表单组件，同时将表单数据对象 formData 和当前表单项的名称 prop 传递给公共表单组件。

3. 在公共表单组件中，接收表单数据对象和表单项名称作为 props，并根据表单项类型渲染对应的表单项，同时在表单项的 change 事件中使用 $emit 发送事件，将当前表单项的值和名称传递给父组件。

4. 在父组件中定义一个方法 handleFormItemChange，用于监听公共表单组件的 change 事件，更新表单数据对象 formData 中对应表单项的值。

5. 最后，可以在父组件中使用 formData 对象中的数据进行表单提交等操作。

代码示例：

Parent.vue

<template>
  <div>
    <div v-for="(item, index) in formList" :key="index">
      <common-form-item :type="item.type" :name="item.name" :label="item.label" :value="formData[item.name]" @change="handleFormItemChange" />
    </div>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

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

export default {
  components: {
    CommonFormItem
  },
  data() {
    return {
      formData: {
        name: '',
        age: '',
        gender: ''
      },
      formList: [
        {
          type: 'text',
          name: 'name',
          label: '姓名'
        },
        {
          type: 'number',
          name: 'age',
          label: '年龄'
        },
        {
          type: 'select',
          name: 'gender',
          label: '性别',
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ]
        }
      ]
    }
  },
  methods: {
    handleFormItemChange(name, value) {
      this.formData[name] = value
    },
    handleSubmit() {
      console.log(this.formData)
      // 提交表单数据
    }
  }
}
</script>

CommonFormItem.vue

<template>
  <div>
    <label :for="name">{{ label }}</label>
    <div v-if="type === 'text'">
      <input :type="type" :name="name" :value="value" @input="handleInput" />
    </div>
    <div v-if="type === 'number'">
      <input :type="type" :name="name" :value="value" @input="handleInput" />
    </div>
    <div v-if="type === 'select'">
      <select :name="name" :value="value" @change="handleSelectChange">
        <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: String,
    name: String,
    label: String,
    value: [String, Number],
    options: Array
  },
  methods: {
    handleInput(event) {
      this.$emit('change', this.name, event.target.value)
    },
    handleSelectChange(event) {
      this.$emit('change', this.name, event.target.value)
    }
  }
}
</script>