Vue 中的.sync 修饰符的功能是 : 当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。
我们通过一个场景来辅助理解一下。
- 场景描述
爸爸给儿子打钱，儿子要花钱怎么办?
答 : 儿子打电话（触发事件）向爸爸要钱
示例 :
App.vue
<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>
Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
效果展示 :
由于这样的场景很常见，所以尤雨溪发明了
.sync修饰符。
:money.sync="total"
等价于
:money="total" v-on:update:money="total=$event"
通过查看Vue.js官方文档 : .sync 修饰符了解到。从 2.3.0 起重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
注
- Vue规则 : 组件不能修改props外部数据
- Vue规则 :
this.$event可以触发事件，并传参 - Vue规则 :
$event可以获取$emit的参数
