在使用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修饰符其实就是对上面代码的省略，一个语法糖
