.sync是一个语法糖
<child :money = "total" v-on:update:money = "total = $event">
//语法糖
<child :money.sync = "total">
Vue的三个规则
- 组件不能修改
props外部数据 -
$emit可以触发事件并传参 -
$event可以获取$emit的参数
解释
//child组件
<div>
{{money}}
<button @click = "$emit('update:money',money-100)">
<span>花钱</span>
</button>
</div>
export default {props: ['money']}
//parent组件
<child :money = "total" @update:money = "total = $event"/>
data: {total: 1000}
当父组件向子组件传递数据的时候，在子组件中可以使用props接收，但有时候我们想在子组件中修改接收的值是不被允许的，因为vue是单向数据流。但是又确实想修改，此时可以在子组件中触发"$emit('update:money',money-100)",在父组件中监听@update:money = "total = $event",这样子在子组件中想做的修改money-100就会传递给父组件，父组件对total进行修改并且及时更新UI。vue作者将这种方式简写成了<child :money.sync = "total">
