Vue中.sync修饰符作用

.sync修饰符

假设有以下场景，爸爸给儿子钱， 儿子要花钱： 爸爸和儿子通过属性 ‘money’ 来沟通

// 儿子的Props里有money
<script>
export default {
  props: ["money"]
};
</script>

爸爸：
<template>
  <div class="app">
    // 绑定儿子的money属性
    <Child :money="total"  />
  </div>
</template>

<script>
// 引入儿子组件
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

第一步 儿子触发一个要花钱的事件，然后告诉爸爸花完之后剩多少，这里假设儿子每次花100元

//儿子
<button @click="$emit('update:money', money - 100)">
      <span>花钱</span>
</button>

核心代码是

$emit('update:money', money - 100)

儿子用$emit触发"update:money"事件，并且告诉爸爸，钱花了还剩下Money-100 注意：子组件不能直接修改Props的值，只能由父组件修改

第二步： 爸爸用v-on:'update:money' 监听 update:money事件，并用$event拿到参数

<Child :money="total" v-on:update:money="total = $event"  />

由于以上两步操作非常麻烦，于是就有了.sync语法糖 用法是直接在 :money 后加一个.sync修饰符

父组件：
<Child :money.sync="total" />
// 等同于
<Child :money="total" v-on:update:money="total = $event"  />

小结： 等价于 绑定属性+监听事件+更新属性 vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。