后台管理---表单组件实现双向绑定的方案

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.