使用sync 修饰符------子组件内部可以修改props
首先看一个需求,外部点击一个按钮,让弹窗组件显示(也就是将弹窗组件显示的flag置为true),点击弹窗组件内部的某个按钮 ,让改props置为false,关闭弹窗,但是会报警告,因为内层组件不能修改外层传进来的props,可以使用vue中的这个修饰符:
.sync
修饰符
在一些情况下,我们可能会需要对一个 prop 进行“双向绑定”。事实上,这正是 Vue 1.x 中的 .sync
修饰符所提供的功能。当一个子组件改变了一个带 .sync
的 prop 的值时,这个变化也会同步到父组件中所绑定的值。这很方便,但也会导致问题,因为它破坏了单向数据流。由于子组件改变 prop 的代码和普通的状态改动代码毫无区别,当光看子组件的代码时,你完全不知道它何时悄悄地改变了父组件的状态。这在 debug 复杂结构的应用时会带来很高的维护成本。
上面所说的正是我们在 2.0 中移除 .sync
的理由。但是在 2.0 发布之后的实际应用中,我们发现 .sync
还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。
从 2.3.0 起我们重新引入了 .sync
修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on
监听器。
如下代码
<comp :foo.sync="bar"></comp>
|
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
|
当子组件需要更新 foo
的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)
|
具体代码为:
组件外部:
组件内部定义为: