Vue 的组件在接受外部数据 props 时，Vue 规定，子组件在通过 props 接受外部数据后只有使用该数据的权利，但没有修改该属性的权利。
如果子组件可以随意修改外部传来的数据，可能导致在数据被修改后，
不知道数据是被谁修改的，使数据混乱
因此 Vue 规定组件只能有权使用 props 的属性，想要改变，就必须通知该数据的真正拥有者，也就是使用该组件的父文件
.sync 修饰符的作用
简化了父子组件之间数据通信的代码书写方式，对 prop 进新双向绑定。
举例
- 父组件有 1000 元
- 子组件每次点击按钮会花掉 10 元
- 父组件上显示的余额与子组件显示的余额会相应发生变化
不使用 .sync 修饰符时
要实现父子组件间值的传递，通常使用 props 和自定义事件 $emit 。
其中，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件监听获取子组件传过来的值。
// 父组件
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<!-- 这里的 update:money 是一个字符串 -->
<!-- 通过 v-on: 绑定 update:money 事件 -->
<!-- 使用 $evet 接收子组件传递的参数 -->
<Child :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 1000 };
},
components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
// 子组件
<template>
<div class="child">
{{money}}
<!-- 通过 $emit 触发父组件上的 update:money 事件 -->
<!-- ，第一个参数为事件名称，第二个参数为参数的返回结果 -->
<button @click="$emit('update:money', money-10)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
// 接受父组件传来的 money 属性
// 子组件是不能直接修改的，需要通过 $emit 触发的方式去更改该属性
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
点击三次按钮，结果如图：
使用 .sync 修饰符
// 父组件如下，子组件不变
<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: 1000 };
},
components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
总结
不使用 .sync 修饰符：<Child :money="total" v-on:update:money="total = $event"/>
使用 .sync 修饰符： <Child :money.sync="total"/>
本文参考摘录了：
