Vue--深入理解.sync 修饰符

结论：.sync 是 Vue 提供的语法糖，用来简化代码的。下面就通过代码示例来说明。

业务场景：父组件有一个 total 变量，每当子组件的按钮被点击时 total 都会按照子组件提供的逻辑对 total 进行更改。

情况一：不使用 .sync 实现，实现思路，子组件的按钮被点击的时候会发布一个事件，父组件就监听这个事件，事件触发父组件就会执行相应的业务逻辑。

首先定义父组件和子组件：

// 这是父组件
<template>
  <div>
    {{ total }}
    <Children :money="total" v-on:update:money="total = $event"/>
  </div>
</template>

<script>
import Children from "./Childen";

export default {
  components: {Children: Children},
  data: function () {
    return {total: 100}
  }
}
</script>

//这是子组件
<template>
  <div>
    Children: {{ money }}
    <button @click="$emit('update:money',money - 10)">
      <span>按钮</span>
    </button>
  </div>
</template>

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

我们可以看到，子组件的变量 money 是一个外部变量，子组件监听 click 事件，被触发就通过 Vue 提供的 Evenbus 来发布名字为 update:money 的事件，money - 10 为事件将要执行的业务逻辑。父组件就监听update:money 这个事件，触发就通过 $event 拿到执行结果。

情况二：使用 .sync 简化代码：

首先定义父组件和子组件：

// 这是父组件
<template>
  <div>
    {{ total }}
    <Children :money.sync="total"/>
  </div>
</template>

<script>
import Children from "./Childen";

export default {
  components: {Children: Children},
  data: function () {
    return {total: 100}
  }
}
</script>

//这是子组件
<template>
  <div>
    Children: {{ money }}
    <button @click="$emit('update:money',money - 10)">
      <span>按钮</span>
    </button>
  </div>
</template>

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

重点在如下两行代码：

<Children :money="total" v-on:update:money="total = $event"/>
<Children :money.sync="total"/>

.sync 是一个语法糖，它可以简化代码，但是也更抽象，所以一定要明白语法糖背后帮我们做了什么，这样当 api　变化时我们才能更快的适应和学习。