Vue 中的 .sync 修饰符

Vue官网上对.sync是这么说的，:name.sync就是:name="name" @update:name="name = $event"的缩写。

它的使用场景是这样的：

在Vue中，子父组件(就是两个.vue的文件)最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但在某些时候，就是需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.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>

<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>

父组件将total的值传递给了子组件，子组件将它的值每次减少100后又传递给了父组件，就是子父组件之间相互通信

父组件的

:money.sync="total"

相当于

:money="total" v-on:update:money="total=$event"

里面的update:money是一个整体，对它进行监听。
.sync作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

总结：

1. 组件不能修改props外部数据
2. $emit可以出触发事件，并传参
3. $ event可以获取$emit的参数