.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。
一般情况下,想要实现父子组件间值的传递,通常使用的是 props 和自定义事件 emit 将值传给父组件,父组件通过事件监听 $event获取子组件传过来的值。 如果想要简化这里的代码,可以使用.sync修饰符,实际上就是一个语法糖。
场景描述
- 爸爸给儿子钱,儿子要花钱怎么办
- 答:儿子打电话(触发事件)向爸爸要钱
- Vue规则:组件不能修改props外部数据
- Vue规则:$emit可以触发事件,并传参
- Vue规则:emit的参数
示例
Child.vue
- :money.sync="total"等价于:money="total" v-on:update:money="total=$event"