Vue中.sync修饰符有啥用

1. 概括的说：

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

2. 详细的说：

如果想要实现父子组件间值的传递，通常要使用的是props和自定义事件$emit。 其中，父组件通过props将值传给子组件，子组件再通过$emit将值传给父组件，父组件通过事件监听获取子组件传过来的值。而使用.sync修饰符可以简化上面的步骤，实际就是一个语法糖。

3. 举个例子：

• Father.vue

<template>
  <div class="app">
     {{dataApp}}
    <hr>
    <Child :money.sync="dataApp"/>
    // <Child :money="dataApp" v-on:update:money="dataApp = $event"/>  //两句作用等同
  </div>
</template>
<script>
 import Child from "./Child.vue";
 export default {
    data() {
      return { dataApp: 10000 };
  },
 components: { Child }
};
</script>

• Child.vue

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    </button>
  </div>
</template>
<script>
 export default {
    props: ["money"]
};
</script>

上面例子中，父组件传了一个参数 money 给子组件，子组件通过$emit修改 money 后，将值同步到父组件。
这里 <Child :money="dataApp" v-on:update:money="dataApp = $event"/> 就相当于 <Child :money.sync="dataApp"/> 。