【vue2 .sync修饰符】

vue2 .sync修饰符

我们都知道，组件之间通过props 或者 $emit 传值都是单向数据流的。如果我们想实现双向数据流的话，我们通常的做法如下：

//父组件给子组件传入一个函数
 <MyFooter :age="age" @setAge="(res)=> age = res">
 </MyFooter>
 
 
 
 
 //子组件通过调用这个函数来实现修改父组件的状态。
 mounted () {
      console.log(this.$emit('setAge',1234567));
 }
 

这时子组件触发了父组件的修改函数使父组件的age修改成了1234567
但是这种写法又稍微有点复杂，其实我们可以使用 .sync 如下直接写：

//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>




//子组件触发事件
 mounted () {
    console.log(this.$emit('update:age',1234567));
 }