原理
.sync修饰符本质上是语法糖，将代码进行了简化。核心原理是对子组件， 对父组件的pros进行监听并且更新。先把父组件的props传入子组件，如果子组件触发事件，对父组件的props进行修改,.sync就会监听该事件并且更新父组件的props
Vue规则
组件不能修改外部数据props，只能触发事件，通知父组件的props进行修改
this.event可以获取$emit的参数
场景
爸爸有1w块钱，儿子打电话请求爸爸传钱(触发事件)，然后进行花费
代码实例
// 儿子组件，从爸爸组件那里请求钱，然后消费
<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>
// 爸爸组件，传钱给儿子，并监听儿子动态
<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>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
