子组件接收父组件需要暴露props，但是props是单向流，在子组件中不能更改prop的值，否则报错。在开发过程中会有这种需求，既要接收父组件的传值，又要在子组件改变其值。通常的办法是通过监听子组件的props触发$emit传值给父组件，如下：

子组件：

props:  {
    //这个是接收父组件的传值
    prop1:  {
        required: true,
        type:  Number,
        default:  1
    }
},
//监听，并通知父组件接收
watch: {
   //子组件中直接使用prop1
    prop1( newValue ) {
        //父组件需要通过触发propChange事件接收newValue值
         this.$emit( 'propChange',  newValue )
     }
}

父组件：

<children
        @propChange =  'propChange'
/>
methods: {
        propChange( value )  {
          //这个value就是子组件传过来的值
            console.log( value ) ;
        }
}

上面的方法相对比较麻烦，父组件需要通过触发事件来获取更新值，如果子组件比较多，方法维护起来比较麻烦（最头疼的是命名 - _ -）,vue 2.3.0+ 新增了语法糖 .sync ，可以更便捷的处理父子组件的数据同步。

子组件：

<template>
    <div class="">
        <div> {{ prop1 }}  </div>
        <button @click="$emit( 'update:prop1', prop1 +1 )">+1</button>
    </div>
</template>

props:  {
    //这个是接收父组件的传值
    prop1:  {
        required: true,
        type:  Number,
        default:  1
    }
}

父组件：

//利用.sync修饰符双向绑定， value就是子组件传来的 prop1 +1
<children :prop1.sync =  'value' />

.sync 是处理prop 双向绑定时比较推荐的方法，但是在 .sync之前的 vue 2.2.0+ 已经增加了一个双向绑定的语法糖 v-model，是的，就是input双向绑定的v-model，这其实也是一个语法糖，只是默认会利用名为 value 的 prop 和名为 input 的事件，所以在使用v-model处理非表单的双向绑定时，尽量避免使用value的prop名和input的事件名，当然也不是不能用，只是尽量避免冲突的可能。下面是v-model的双向绑定例子：

子组件：

 <template >
    <div> {{ prop1 }}  </div>
    //这里不能用 prop1++，因为++ 等同于  prop1 = prop1 +1，这就直接改变了prop1的值了，在子组件中是不允许的，传值 prop1 +1给父组件，子组件再接收父组件的值才是正确的逻辑。
    <button @click="$emit( 'change', prop1 +1 )"> 加一个 </button>
</template >

  //这个model对象是重点, prop：要监听的属性名，event：触发的自定义事件名
  model: {
    prop: 'prop1',
    event: 'change'
  },
  props: {
    prop1: Number
  }

父组件：

//这个value 就是子组件传过来的值（prop1 +1）
<ttse v-model="value"/>
data() {
      return {                
                value: 0
            }
        }