修饰符.sync

sync修饰符是一个语法糖，类似v-model，它主要是解决了父子组件的双向绑定问题。因为vue提倡的是单向数据流动，因此不能直接在子组件里面修改父组件传过来的数据。

Vue规则

组件不能修改props外部数据
$emit可以触发事件并传参
$event可以获取$emit参数

在父组件中：

<div :money.sync="total"></div>

等价于：/.sync针对与money的监听事件缩写/

<div :money.sync="total" v-on:updata:money="total=$event"></div>

下面我们通过一个案例了解（父组件）：

<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money.sync="total"/>
   </div>
</template>
<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>

子组件：

<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">
    <span>花钱</span>
    </button>
   </div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>

当我们点击花钱按钮：子组建的props发生改变，父组件的props也会发生变化。

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

v-model

Vue3中用v-model替代了.sync修饰符和组件model选项
针对于有参数的：<div v-model:money="total" ></div>
等同于：<div :money.sync="total" v-on:uodata:money="total=$event" ></div>

《学习笔记——Vue的修饰符.sync》

修饰符.sync

Vue规则

v-model