Vue中的.sync修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
尤雨溪规定了Vue规则：
组件不能修改props外部数据
this.$emit可以触发事件，并传参
$event可以获取$emit的参数

我们假定一个场景，父亲有钱，要给儿子用。

App.vue
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event”/>//把花掉的钱记录在$event
  //<Child :money.sync="total" />
  </div>
</template>

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

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

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>

<style>
.child { border: 3px solid green; }
</style>

解析：
儿子（通过外部数据）拿到这个钱，但是不能直接对这个钱进行操作，（因为不能操作外部数据），我们通过this.$emit触发一个事件，把花钱的事情告诉父亲。所以父亲就要对儿子花钱的动作进行一个监听，如果儿子花钱了，就把画的钱告诉父亲。那么为了知道儿子花了多少钱，需要把这个值存在一个变量上，这个变量是$event。v-on:update:money = "total = $event"监听事件(update:money)获取$event。被封装成了修饰符.sync。

<Child :money.sync='total'/>
//等于<Child :money='total' v-on:update:money = "total = $event"/>

效果如下：

o58s6-ldl9l.gif