意义

当我们在子组件中想要修改通过props绑定的外部组件里的数据时，Vue不支持我们直接在子组件中进行修改，子组件没有修改父组件数据的权利。
我们可以利用EventBus事件中心，在vue实例上就含有$emit接口来触发事件，所以在子组件中使用$emit()来触发事件，并把修改后的值作为参数传入。
Vue会把传入的参数保存到$event中，父组件响应事件并通过$event来取值实现数据的更新。

示例

父组件

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

子组件

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

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


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

其中可以通过 .sync修饰符简化父组件的代码：

<Child :money="total" v-on:update:money="total = $event"/>可以改写为 <Child :money.sync="total"/>

这就是一个语法糖。

Vue中的.sync 修饰符

意义

示例