Vue中如何实现父子组件数据双向绑定

这篇文章将为大家详细讲解有关Vue中如何实现父子组件数据双向绑定，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

实现思路：

父 向 子 组件传值：使用 props 属性。( props 是property[属性] 的复数简写 )
子 向 父 组件传值：使用自定义事件。

一、父子组件单向传值

1、父向子传值

父向子组件传值，子组件接收到数据之后，保存到自己的变量中。

//父组件写法   //子组件定义以及数据 components:{  cld:{   template:'#child',   props:{    numP:Number   },  } }  //子组件内容 

props 用于接收父组件传过来的值，props 的写法有很多种，具体如：

//方式1 ：  直接接收数据 props: [ 'numP' ]  //方式2： 加类型限制 props: [  numP: Number  ]   //方式3：添加默认值 props: [  numP: {   type:Number,   default:0   } ]   //方式4：是否必须值限制 props: [  numP: {   type:Number,   default:0,   require:true //添加必须值，不传此值会报错  } ]   //方式5：采用对象形式 props: {  numP: {   type:Number,   default:0,  } }

2、子向父传值

子向父组件传值，主要通过自定义事件进行传值，具体实例如下：

// 父组件内容 
  子组件获取到的数据{{getNum}}   
  //父组件方法 methods:{  getNumC(data){   this.getNum = data //接收子组件传的数据  } }, //子组件定义 components:{  cld:{   template:'#child',   data(){    return{     numC:1314 //子组件数据定义    }   },   mounted(){     this.$emit( 'accept' , this.numC ) // 触发自定义事件    }   } },

二、父子组件数据双向绑定

Vue 的数据都是单向流动的，而且 vue 中从来就没有任何的双向绑定，v-model 实现的双向绑定只是语法糖而已。

方式1：利用 watch 实现父子组件的数据双向绑定，具体实例如下：

  数据
{{num}}  
   
 //子组件内容      const app = new Vue({  el:'#app',   data:{    num:'520',    },   methods:{    getNumC(data){     this.num = data    }   },   components:{    cld:{     template:'#child',     props:{      numb:String     },    data(){     return{      childNum:0,     }    },   watch:{    numb:function(){     this.childNum = this.numb    },    childNum:function(){     this.$emit('accept',this.childNum)     }    },   mounted(){    this.childNum = this.numb    }   }  }  })

方式2：.sync 修饰符实现双向绑定

在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。这很方便，但也会导致问题，因为它破坏了单向数据流。(数据自上而下流，事件自下而上走)

 //会扩展为： 

当组件需要更新 numb 的值时，需要触发更新事件：

this.$emit("update:numb", newValue );

使用具体实例如下：

// 父组件   //子组件 props: ['foo'], data() {   return {    newFoo: this.foo;    } }, methods:{  add:function(){   this.newMsg=10;   this.$emit('update:foo',this.newFoo);  } }

关于"Vue中如何实现父子组件数据双向绑定"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。