Vue 中的 .sync 修饰符的作用

vue 修饰符sync的功能是：当一个子组件改变了一个 props的值时，这个变化也会同步到父组件中所绑定。 通俗的说：.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。

vue规则：

1.组件不能修改外部数据

2.this.$emit可以突发事件，并传参

3.$event可以获取$emit的参数

举列子说明:爸爸给儿子钱,儿子要花钱怎么办?

答:儿子打电话(触发事件)向爸爸要钱

父组件

<template>
  <div class="app">
    父组件 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:useMoney="total = $event"/>  //第一种写法
//先是绑定属性money等于total变量,也就是告诉儿子有多少钱
//然后绑定useMoney事件,发现儿子触发useMoney这个事件,通过$event拿到这个值
    <Child :money="total" v-on:updated:money="total = $event"/>//第一种写法,改为updated:money
    <Child :money.sync="total"/> //第三种写法:.sync修饰符 
//.sync代替了v-on:updated:money="total = $event"
//$event是$emit从子组件传出来的值
</div> 
</template>  

<script>
import Child from "./Child.vue";    //引入儿子的组件
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }       //这里可以缩写为一个Child
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

子组件

<template>
  <div class="child">
    子组件  {{money}}
    <button @click="$emit('useMoney', money-100)">  //第一种写法
    <button @click="$emit('update:money', money-100)">   //第二种将useMoney改为updated:money
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]     //引入一个外部变量
};
</script>


<style>
.child {
  border: 3px solid green;
}
</style>

:money.sync = “total” === :money = “total” v-on:update:money = “total
= $event”