type
String
表单项类型（如 select、input 等）
label
String
表单项的标题内容
class
String
表单项的样式类名
modal
String
弹窗的唯一标识
id
String
表单项的唯一标识，用于数据提交
3. 父组件示例
<template>
<light
ref="mychild"
:arrayData="arrayData"
:formData="formData"
:showData="showData"
:actKeyWordObj="actKeyWordObj"
@setValid="setValid"
/></template>
<script>
export default {
data() {
return {
actKeyWordObj: {}, // 下拉框数据
formData: {}, // 表单数据
showData: {}, // 弹窗数据
arrayData: [] // 表单项配置
};
},
methods: {
setValid(valid) {
// 表单验证回调
console.log('表单验证结果:', valid);
}
}
};</script>
4. 子组件设计思路
-
动态渲染表单项
根据 arrayData 中的 type 字段动态渲染不同类型的表单项（如输入框、下拉框等）。 -
表单数据绑定
通过 v-model 实现 formData 与表单项的双向绑定。
-
弹窗处理
根据 modal 字段控制弹窗的显示与隐藏，并通过事件回调更新表单数据。