Vue 中的 .sync 修饰符

184 阅读1分钟

当有些情况需要对一个 prop 进行双向绑定时,会带来维护性的问题 -> 子组件可以变更父组件的属性

Vue 提供了 update:属性名称 的方式触发事件

用如下方式在子组件中表示赋值的意图

this.$emit('update:title', newTitle)

在父组件中监听对应的事件,并根据需要更新本地数据

<text-document :title="title" @update:title="title = $event"><text-document/>

Vue 提供了一个修饰符用于简化上述的操作 .sync,相当于 @update:title="title = $event"

<text-document :title.sync="title"><text-document/>