vue3 组件双向绑定的方案

    目前在用vue3写项目的时候，当对一个组件进行双向绑定的时候，在子组件中数据发生改变通常要使父组件里面的相应的数据进行同步修改.

 1，话不多说针对上述需求，目前主流的方案是

在父组件中用v-model （实则v-model只是一种语法糖写法）绑定相应的值，在子组件中

中利用props中modelValue来接收值，然后我们就可以直接修改modelValue来修改父组件中相应的值, 但是这种做法虽然普遍，但是vue3  props标准是要保持单向数据传递的原则，但是我们能违背这个原则直接改变modelValued的值，这样虽然不会报错但是控制台会出现警告。

//v-model非语法糖写法
<Form :modelValue="formData" @update:modelValue="formData = target">
</Form>

//父组件
    <Form  v-model="formData">
      
    </Form>

//子组件
form.vue
props: {
    modelValue: {
      type: Object,
      required: true
    },
const modiflyValue = ()=>{
    modelValue = newValue
}

第二种写法(推荐使用) 我个人认为可以解决这个问题，实测有效，思路就是在setup中将props接收的数据进行解构到一个新的对象中（实则就是进行了浅拷贝），这个对象被ref包裹,是它成为响应式数据，然后呢我们用watch来鉴定这个值，一旦这个值发生了变化以后，用emit('modelValue')将新的数据发射到父组件中，进行接收

//子组件
props: {
    modelValue: {
      type: Object,
      required: true
    },
}
emits: ['update:modelValue'],
  setup(props, { emit }) {
    //浅拷贝
    const formData = ref({ ...props.modelValue })
    watch(formData, (newVal) => emit('update:modelValue', newVal), {
      deep: true
    })
    return {
      formData
    }
  }