Vue 中的 .sync 修饰符有什么用

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。 通俗的说：.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

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

举例说明

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 后，将值同步到父组件。