Vue 中的 .sync 修饰符有什么用

276 阅读1分钟

.sync修饰符可以实现子组件与父组件的双向绑定,并且可以实现子组件同步修改父组件的值。

一般情况下,想要实现父子组件间值的传递,通常使用的是 props 和自定义事件 emit。其中,父组件通过props将值传给子组件,子组件再通过emit 。 其中,父组件通过 props 将值传给子组件,子组件再通过 emit 将值传给父组件,父组件通过事件监听 $event获取子组件传过来的值。 如果想要简化这里的代码,可以使用.sync修饰符,实际上就是一个语法糖。

场景描述

  • 爸爸给儿子钱,儿子要花钱怎么办
  • 答:儿子打电话(触发事件)向爸爸要钱
  • Vue规则:组件不能修改props外部数据
  • Vue规则:$emit可以触发事件,并传参
  • Vue规则:event可以获取event可以获取 emit的参数

示例

Child.vue

  • :money.sync="total"等价于:money="total" v-on:update:money="total=$event"