Vue 中的 .sync 修饰符有什么用

Vue 中的.sync 修饰符的功能是 : 当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

我们通过一个场景来辅助理解一下。

• 场景描述
  爸爸给儿子打钱，儿子要花钱怎么办?
  答 : 儿子打电话（触发事件）向爸爸要钱
  示例 :
  App.vue

Child.vue

效果展示 :

由于这样的场景很常见，所以尤雨溪发明了.sync修饰符。

:money.sync="total"

等价于

:money="total" v-on:update:money="total=$event"

通过查看Vue.js官方文档 : .sync 修饰符了解到。从 2.3.0 起重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

注

• Vue规则 : 组件不能修改props外部数据
• Vue规则 : this.$event可以触发事件，并传参
• Vue规则 : $event可以获取$emit的参数