1.我们不仅封装了输入框,还得拿到输入框所输入的东西
2.因为最后提交表单的信息都是在父组件中提交的
3.我们可以在父组件里面定义数据,然后给子组件传入过去,并且让formData 里面的每个属性和每个表单的item 一一对应上。
4.我们可以在类型接口里面添加一个类型字段,
5.在配置里面添加相应的字段
6.然后在组件每个item 通过 v-model 绑定每一属性
例子:动态获取
<el-input :placeholder="item.placeholder" :show-password="item.type==='password'" v-model="formDate[`${item.field}`]"/>
#但是直接通过props 修改属性,这违反了单项数据流的规定
1.这个位置之前是通过属性来绑定数据的
2.我们现在可以通过v-model 进行数据的双向绑定实现
3.组件的双向通过v-model 传进来 就是默认的 modelValue
4. 我们可以使用watch 来监听这个值发生变化的时候在做修改
emits:['update:modelValue'], setup(props,{emit}) { const formData=ref({...props.modelValue }) //相当于将原来的对象拷贝了一份 //通过watch 监听formData 数据发生改变的时候,通过emit将数据发到外面的modelValue 里面 // watch(监听的数据,(新值)=>发射(一个事件,新值),深度监听 watch( formData,//监听这个数据 (newValue)=>{ //当这个newvVlue 发生改变的时候,就把下面这个发出去 emit('update:modelValue',newValue) }, {deep:true}) //深度监听 return { formData } }
5.
![]()