Vue中.sync修饰符

318 阅读1分钟

众所周知vue中有几个规则:

组件不可以修改prop外部的数据

$emit可以出发事件,并传参

event可以获取emit的参数

当把数据传给一个子组件,这个组件不能直接修改这个数据,而是需要通过emit来触发一个事件并通知到父组件,父组件通过event来获取参数的值

例如:

<button @click="$emit('update',n-1)">//子组件传参
<Child :n="total" v-on:update="total=$event" />//父组件监听并获取参数

父组件可以直接使用.sync修饰符

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

vue修饰符sync表示: :n.sync="total"当一个子组件改变了一个prop的值时,这个变化也会同步到父组件绑定