Vue中的.sync修饰符有什么用（$emit的第一个参数加上冒号有什么作用）

1、.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

2、当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，也可以让父组件使用props传初始值，子组件通过$emit触发事件改变值并传参，父组件通过$event事件监听获取$emit的参数。

3、Vue规则：（1）组件不能修改props外部数据。（2）this.$emit可以触发事件，并传参。（3）$event可以获取$emit的参数。

4、示例代码

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>

Father.vue

<template>
  <div class="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: 3px solid red;
  padding: 10px;
}
</style>

上述代码中，父组件传了一个参数 money 给子组件，子组件通过$emit修改 money 后，将值同步到父组件。这件事也可以用.sync来做。