本文的目录：
1.先介绍以下.sync是什么
2.举个例子来阐述.sync的用法
3.通过上面的例子来学习一下，.sync的优点
4.不适合用.sync的情况
1.Vue中常见的修饰符有如下几个
.stop , .prevent , keypress.enter , .sync
今天我们着重来说一下.sync
1. .sync的出现
vue2.3+版之后才有的。
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定
会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显
的变更来源。所以下面举个父子组件的例子
以.sync为例子，举个父子组件的例子，子组件要用父组件里面的数据并且改变父组件里的数据的例子：
其中App.vue文件代码如下：
<template>
<div id="app">
App.vue我现在有{{ total }}
<hr />
<Child :money="total" v-on:update:money="total = $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: 1px 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: 1px solid green;
}
</style>
其中：
<Child :money="total" v-on:update:money="total = $event" />
可简写为：
<Child :money.sync="total" />
3.这样做的好处是什么呢？
.sync 就是个语法糖，只是作为一个编译时的语法糖而存在的，会被扩展为一个自动更新父组件属性的v-on监听器。
.sync能很大程度简写一个过程：那就是，正常情况下，一个子组件改变了一个prop的值时，这个变化会同步到父组件中，如果不用.sync,要绑定，然后还要监听，比加上.sync会复杂一点。
4. .sync使用的注意事项：
注意带有 `.sync` 修饰符的 `v-bind` **不能**和表达式一起使用 (例如 `v-bind:title.sync=”doc.title + ‘!’”` 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 `v-model`。
上面的例子的全部代码如下所示：
2.其他的修饰符，也比较常见的有：
@click.stop = "xxx"
@click.prevent="xxx"
@keypress.enter="xxx"
:money.sync="total"
