.sync 修饰符

171 阅读1分钟

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件都没有明显的变更来源。

几步说完

首先 , 了解vue 都知道, 在vue中存在父组件传子组件参数, 就是父传子, 子传父, 兄弟传

然后.sync这个就是一个语法糖, 就是简化了几句代码的意思

他简化了啥, 其实就是我们都知道, prop是单向数据流, 只有父传子

子传父是通过$emit触发一个事件来传递参数的, .sync就是$emit这句话的语法糖

大家看文档有一个困惑, 那个派发的事件叫( update:show )在 vue文档中, 其实他就是多写了个冒号, 他和普通的事件名没有任何区别

就是他,其实你随便写啥都行, 他也就是作为一个标识才这样写

image.png

image.png

都一样 image.png

最后使用.sync

!!!!!!!!!!!!!说白了, 以后使用子传父, 子组件依然触发一个事件,派发参数, 父组件就写他就写了,这又有了子传父,加上父传子, 不就是prop 进行"双向绑定"!!!!!!!!!!!!!!!!

image.png