案例

准备2个文件：Main.vue、Child.vue

- 代码

Main.vue

  1. <template>
  2.   <div class="border">
  3.     总金额：{{total}} 元
  4.     <hr>
  5.     <Child :money="total" v-on:update:money="total = $event"/>
  6.   </div>
  7. </template>
  9. <script>
  10. import Child from "./Child.vue";
  11. export default {
  12.   data() {
  13.     return { total: 10000 };
  14.   },
  15.   components: { Child: Child }
  16. };
  17. </script>
  19. <style>
  20. .border {
  21.   border: 3px solid black;
  22. }
  23. </style>

Child.vue

  1. <template>
  2.   <div class="child">
  3.     <button @click="$emit('update:money', money-100)">
  4.       <span>花钱</span>
  5.     </button>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   props: ["money"]
  12. };
  13. </script>
  16. <style>
  17. .child {
  18.   border: 3px solid pink;
  19. }
  20. </style>

- 解释

Main.vue用外部表示

Child.vue用内部表示

外部 将total的值，赋值给money，然后 内部 通过props接收了money的值。当button触发click时，会使用$emit将money-100发送给 外部 。接着 外部 通过v-on接收了数据，并将money-100的结果，赋值给total。然后将total的值显示在div标签中。从而实现对数据的修改。

- .sync修饰符的出现

尤雨溪发现这种操作挺常用的，就为这种行为进行了一个简化。

将 <Child :money="total" v-on:update:money="total = $event"/> 简化为 <Child :money.sync="total"/> 通过使用.sync修饰符来实现上面一整局话的效果。

Main.vue

  1. <template>
  2.   <div class="border">
  3.     总金额：{{total}} 元
  4.     <hr>
  5.     <Child :money.sync="total"/>
  6.   </div>
  7. </template>
  9. <script>
  10. import Child from "./Child.vue";
  11. export default {
  12.   data() {
  13.     return { total: 5000 };
  14.   },
  15.   components: { Child: Child }
  16. };
  17. </script>
  19. <style>
  20. .border {
  21.   border: 3px solid black;
  22. }
  23. </style>

.sync简单来说就是，监听是否有人修改本地的数据，如果有的话就对本地数据进行一个修改。