傳送門：https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

https://segmentfault.com/q/1010000012055834/a-1020000012055960

1、最單純的做法：事件回調

// 父組件
<msgbox :value=‘value‘ @shift="fuck"></msgbox>

fuck (data) {
  this.value = fuck
}

// 子組件
<button @click=‘go‘></button>

go () {
   this.$emit(‘shift‘, ‘你要更新的值‘);
}
 

其實父組件如果只是賦值的話，可以寫的更單純一點。可以省略函數的定義和使用。（強烈推薦）

// 父組件
<msgbox :value=‘value‘ @shift="value = $event"></msgbox>

// 子組件
<button @click=‘go‘></button>
go () {
   this.$emit(‘shift‘, ‘你要更新的值‘);
}

2、官方推薦的做法： @update

同1，我是看不出區別，如果是我，我建議使用1，反而可讀性更強。

// 父組件
<msgbox :fuck=‘value‘ @update:fuck
 
="fuck = $event"></msgbox>

// 子組件
<button @click=‘go‘></button>
go () {
    this.$emit(‘update:value‘, ‘你要修改的值‘)
}

3、我推薦的做法：v-bind.sync

// 父組件，可以省略 @update 或者 @event
<msgbox :value.sync=‘value‘></msgbox>

// 子組件
<button @click=‘go‘></button>
go () {
    this.$emit(‘update:value‘, ‘你要修改的值‘)
}
 

Vue 溫故而知新 props如何雙向屬性綁定