浅谈Vue的.sync修饰符Vue框架并不支持双向绑定，但在某些情况下，我们希望对某个Prop进行类似双向绑定的操作，V

Vue框架并不支持双向绑定，但在某些情况下，我们希望对某个Prop进行类似双向绑定的操作，Vue则提供了一个监听更新事件的方法update:myPropName作为支持。

示例代码请看这里。

子组件的prop接收来自父组件的数据，当点击子组件里的"花钱"按钮之后，我们希望变更父组件里的数据，则该按钮需要绑定一个方法表达我们的意图：

/* Child.vue */
this.$emit('update:money', money - 100)

在父组件里，就可以通过相应的代码实现对子组件的事件监听，从而实现更新本地的数据。

/* App.vue */
<template>
  <div class="app">
    <Child :money="total" v-on:update:money="total = $event" />
  </div>
</template>

vue提供了.sync修饰符，本质上是语法糖，来简化父组件里的代码：

/* App.vue */
<template>
  <div class="app">
    <Child :money.sync="total" />
  </div>
</template>

.sync修饰符为实现父组件和子组件之间的类似“双向绑定”提供了便利方法。更多的适用场景需要在项目实践中去发现。