vue props 传入一个事件_Vue 中的 .sync 修饰符

.sync修饰符

.sync是一个语法糖。是父组件监听子组件更新某个props的请求的缩写语法。

• Vue规则：组件不能修改props外部数据
• Vue规则：$emit可以触发事件并传参
• Vue规则：$event可以获取$emit的参数
• 以上三条规则，都是尤雨溪定的

Vue中的 props 是单向向下绑定的

即：每次父组件更新时，子组件中的所有 props 都会刷新为最新的值。

但是如果在子组件中修改 props ，Vue会向你发出一个警告。（无法通过修改子组件的props来更改父组件。）

由于无法通过修改子组件的props来更改父组件，所以我们在父组件使用子组件的标签上声明一个监听事件

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

在子组件想要修改时使用$emit触发事件并传入新的值，让父组件进行修改。

Vue帮我们做了一个修饰符，简化我们声明监听事件的写法，即.sync 修饰符。

<Child :money.sync="total" />