.sync 方式在使用vue.js创建多页时有效,但是使用vue.esm.js时无效
今天我在开发组件时,遇到一个问题,我想在子组件内改变父组件的属性,查阅了官方文档之后,我发现Vue重新引入了 .sync修饰符,但是刚用就发现了个坑。没有同步!没有同步!没有同步!重要的事情说三遍。我使用的是vue.esm.js
这是父组件中的一段pug代码
calendar(:show.sync="show", @export="exportDate")
这是子组件的部分代码
this.$emit('update:show', false);
然而并没有什么软用。通过Chrome Devtools,我检测到了update:show的事件一直被触发。但是show属性一直都没有改变。
摒弃这种语法糖后,我直接按照语法糖转化后的写法
calendar(:show="show", @export="exportDate", @update:show="val => show = val")
最后我通过官方指导的扩展后的写法,发现能实现数据的改变。
在网上查阅了很多资料,发现并没有类似的问题(当然除了在我之前有个英文的提问,讲到了同样的问题)
不知道大家有没有遇到过这类问题,并且知道缘由的。
PS: 我使用unpkg的vue.js 2.3.3 并没有出现这类问题,代码能正常识别.sync的语法糖。
评论 (0)