前言 

在uniapp中, 封装组件的props单向数据流更为严格, 不允许改变子组件的props属性, 所以记录下uniapp下的form表单的组件是如何封装的, 双向数据是如何绑定的.

版本:  "@dcloudio/uni-ui": "^1.4.27", "vue": ">= 2.6.14 < 2.7"...

需求

实现下面这张图片这样的场景

实现代码

抽取了逻辑代码, 业务代码全部去除方便大家阅读.

父组件:

// 父组件:
<template>// uni-app不支持v-model:formData="formData"<hf-form-data v-model="formData" :config="config"/>
</template>
<script>
export default {name:"fatherComp",data() {return {config: [{type: "input",label: "我是输入框",key: "name",rules: [{ required: true, errorMessage: "请选择" }]},{type: "textarea",label: "我是文本域",key: "remark",rules: [{ required: true, errorMessage: "请选择" }],},],// 和config数组的key一一对应formData: {name:"",remark: ""}};},watch: {formData: {handler(newVal) {console.log('父组件更新啦', newVal);},deep: true,},}
};
</script>

子组件:

// 子组件
<template><uni-forms ref="form" :model="formValue"><view v-for="(item,i)in config" :key="i"><!-- 双向数据绑定 --><uni-forms-item:name="item.key":label="item.label":rules="item.rules"><input v-if="item.type === 'input'" v-model="formValue[item.key]"/><textarea v-else-if="item.type === 'textarea'" v-model="formValue[item.key]"/></uni-forms-item></view></uni-forms>
</template>
<script>
export default {name: "childComp",props: {config: {type: Array,default: () => [],},value: {type: Object,default: () => {},},},data() {return {formValue: {},};},watch: {// 2. 监听子组件的表单变更, 更新父组件formValue: {handler(newVal) {this.$emit("input", newVal);},deep: true,},},created() {this.formValue= { ...this.value }; // 1. 初始化赋值, 通过拷贝去除对象引用问题}
};
</script>