.sync修饰符

父子组件之间可能有时需要进行”双向绑定“，但是对于Vue而言，真正的双向绑定会带来维护上的问题，子组件可以变更父组件，而父组件和子组件之间都没有明显的变更来源。我们以update:myPropName的模式触发事件取代双向绑定。父子组件之间通常用props来传递数据。Vue规定子组件不能修改props外部数据，如果修改控制台会报错。那么我们需要通过props将值传给子组件，子组件再通过$emit将值传给父组件，父组件使用事件监听$event获取子组件传过来的值。我们在这一过程中就可以使用.sync修饰符。

一、子组件中代码

根据文档我们首先在子组件中可以用以下方式表达对其赋新值的意图。

仿照文档子组件可以这样写。

emplate>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-1000)">
      <span>儿子花钱</span>
    </button>
  </div>
</template>

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


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

主要看此处代码。

  <button @click="$emit('update:money', money-1000)">

二、父组件中代码

然后对于父组件，我们可以监听那个事件并根据要求更新一个本地数据的property。

根据文档父组件我们可以这样写。

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child 
      v-bind:money="total" 
      v-on:update:money="total = $event">
    </Child>
  </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 
      v-bind:money="total" 
      v-on:update:money="total = $event">
 </Child>

三、.sync修饰符使用

用.sync修饰符可以写为。

<Child 
      v-bind:money.sync="total">
</Child>

v-bind缩写，Child组件简写之后最终代码为。

  <Child  :money.sync="total" />

按下按钮，最终为。

综上分析，.sync修饰符实际上是一种语法糖，使用起来特别方便，但是我们依旧需要明白它的原理。

重要参考：

Vue2 教程 .sync修饰符