Vue修饰符.sync

在使用Vue的时候，有时候需要把数据从父组件传给子组件，然后子组件又需要操作这个数据，但是子组件不能直接操作父组件的数据，这时候就通过$emit将一个事件传给父组件，父组件监听这个事件完成操作
代码举例：

// 子组件
<template>
  <div>
    儿子要花父亲的钱{{money}}
    <button @click="$emit('update:money', money - 100)">花钱</button>
  </div>
</template>
<script>
  export default {
    props:["money"]
  }
</script>

// 父组件
<template>
  <div id="app">
    父亲现在有{{total}}
    <hr />
    <Child :money=total v-on:update:money="total = $event"/> 
    <!-- <Child :money.sync=total />-->
  </div>
</template>

<script>
import Child from "./Child.vue"
export default {
  name: 'App',
  data(){
    return{
      total: 10000
    }
  },
  components: {
    Child
  }
}
</script>

界面如下

在儿子那点击一次按钮，父亲的钱就少100

image.png
上面代码中

<Child :money=total v-on:update:money="total = $event"/> 

可以简写成

 <Child :money.sync=total />

.sync修饰符其实就是对上面代码的省略，一个语法糖