Vue 修饰符：.sync

本篇博客是作为个人自学记录，如有不足之处，请批评指正。

官方文档：.sync 修饰符

sync 的功能是什么

sync 是一个语法糖；当一个子组件给变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

详细解释

使用场景

• 在子组件需要通过修改父组件传递过来的 prop 去改变父组件的状态的时候 使用 sync

功能

• 它其实就是对父子组件之间的 prop 值做了一个双向绑定

现实生活举例

我要向银行贷款，正常来讲，这个时候钱都是在银行里，我需要向银行申请贷款，然后才能从银行取出我的钱来使用；

如果说我还没申请，直接跑去银行钱库里取钱，不就相当于抢劫了吗？

同理：组件传值的过程等同于是银行告诉我有这么多钱可以贷款拿去用，不是让我直接去金库里取钱，我要贷多少，告诉银行，然后剩下多少金额告诉银行就ok了

代码示例

child.vue(子组件)

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

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

parent.vue(父组件)

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <!-- 语法糖式写法 -->
    <!-- <Child :money.sync="total"/> -->
    <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>

总结

总而言之：.sync 就是事件绑定的语法糖