Vue的.sync修饰符

是一个语法糖的存在。
案例

App.vue

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

Child.vue

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">//触发事件，并传入新值
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>

Child.vue组件改变了prop 的值时，这个变化也会同步到App.vue组件中绑定,但这样的双向绑定会带来维护上的问题，所以用'update:money'的模式代替触发事件。

App.vue组件中<Child :money.sync="total"/>等价于<Child :money="total" v-on: update:money="total=$event"/>，写起来更加方便。