如果有多个表单元素，重复代码较多，可以将表单输入元素封装为子组件。这样可以提高代码的复用性和维护性。
子组件：FormInput.vue
<template>
<div>
<input v-if="type === 'input'" :placeholder="label" v-model="value" />
<select v-if="type === 'select'" v-model="value">
<option v-for="option in options" :key="option" :value="option">{{ option }}</option>
</select>
</div>
</template>
<script>
export default {
props: {
type: { type: String, required: true },
label: { type: String, required: true },
value: [String, Number],
options: Array,
},
model: {
prop: 'value',
event: 'input',
},
};
</script>
父组件
<template>
<div>
<form-input
v-for="(field, index) in formFields"
:key="index"
:type="field.type"
:label="field.label"
v-model="formData[field.name]"
:options="field.options"
/>
</div>
</template>
<script>
import FormInput from './FormInput.vue';
export default {
components: { FormInput },
data() {
return {
formData: {},
formFields: [
{ name: 'username', label: 'Username', type: 'input' },
{ name: 'gender', label: 'Gender', type: 'select', options: ['Male', 'Female'] },
]
};
}
};
</script>
这样，通过创建一个通用的 FormInput 组件，父组件不需要重复每个输入元素的显示逻辑，只需维护表单数据和字段定义。
动态组件
如果表单元素类型更多样，可以使用 Vue 的 <component> 标签动态渲染不同类型的输入组件
<template>
<div v-for="(field, index) in formFields" :key="index">
<component :is="field.component" v-model="formData[field.name]" v-bind="field.props" />
</div>
</template>
<script>
import InputComponent from './InputComponent.vue';
import SelectComponent from './SelectComponent.vue';
export default {
components: {
InputComponent,
SelectComponent
},
data() {
return {
formData: {},
formFields: [
{ name: 'username', component: 'InputComponent', props: { placeholder: 'Username' } },
{ name: 'gender', component: 'SelectComponent', props: { options: ['Male', 'Female'] } },
]
};
}
};
</script>
