.sync修饰符

第一步：先用一句话解释

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

第二步：具体解释

一般情况下，想要实现父子组件间值的传递，通常使用的是 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 后，将值同步到父组件。
这里 <Child :money="dataApp" v-on:update:money="dataApp = $event"/> 就相当于 <Child :money.sync="dataApp"/> 。

小结

以上是我的一些学习思路和总结，深入学习可以参考Vue文档里的相关介绍，欢迎大家和我多多交流，如有错误烦请指正~~~