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

最新推荐文章于 2025-07-09 16:11:33 发布

原创最新推荐文章于 2025-07-09 16:11:33 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

本文介绍了一种实现父组件与子组件之间双向数据绑定的方法。通过深度监听和值更新机制，确保了父组件与子组件之间的数据同步变化。具体实现包括在子组件中监听父组件传递过来的数据变化，并将自身数据的变化反馈给父组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

父组件代码

<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>