这节课我们介绍下sync修饰符 这是vue2.3以后提出来的一个语法
是一个语法糖
首先我们把上节通过v-model方式触发父组件更新的方法改下
首先看下完整的写法
booklist.vue文件
image.png
在父组件中的子组件pagabar上面进行自定义事件change(事件名) 然后传递parentCurrent属性到子组件（这里要注意 大写的映射到子组件的props里面和模板引用处 会映射成小写 否则取不到值）
这时子组件更改如下
image.png
改成了小写的parentcurrent
并且用emit触发了事件名为change的自定义事件
运行效果
image.png
可以看见运行效果和以前相同
但是我们会发现 emit触发的自定义事件 名字为change还是有点别扭
我们可以改成下面
image.png
这时子组件里面
image.png
这里事件名表示更新当前页码 可以发现比change事件名 语义好了些
但是我们会发现代码变长了
但是官方推出的sync修饰符 可以简化这种写法
如下
image.png
这时子组件更新代码如下
image.png
表示更新parentcurrent这个方法 也就是v-bind:parentCurrent.sync 里面的这个bind:parentCurrent
以上就是sync修饰符的基本使用方式 （应用场景）
网友评论