vue中父子组件双向数据绑定

要使用父组件值后面变化子组件的数据也跟着变化和子组件数据变化父组件也跟变化

父组件代码

<template>
  <div>
    <!-- 子组件 -->
    <abc v-model:value="formData"></abc>
  </div>
</template>

<script>
export default {
  data() {
    return {
      FormData:{
        data:{}
      },
    };
  },
};
</script>

子组件代码

<template>
  <div>
    {{Form}}
  </div>
</template>

<script>
export default {
  props:{
    value:{
      // 传过来的数据类型
      type:Object,
      default:{}
    }
  },
  data() {
    return {
      Form:{
      },
    };
  },
watch:{
    // 监听父传过来的后面变化值和自己变化值传给父
  value:{
    handler(newol,oleva){
       this.Form = newol
    },
    // 深度监听
    deep:true
  }
},
created(){
  // 父组件没变化时子组件使用数据先等于父组件初始值
    this.Form = this.value
  }
};
</script>

<style lang="less" scoped>
.home{
  display:flex;
  justify-content: space-around;
  .test1{
    height:20px;
    background-color: pink;
  }
}
.test2{
  margin-top:30px;
  height:20px;
  background-color: red;
}
</style>