关于vue自定义事件的命名问题

Question

今天用vue遇到了一个很奇怪的问题：
我.sync绑定了一个prop：:is-amazon.sync="isAmazon"，
然后在子组件中用$emit给父组件传值：this.$emit('update:is-amazon',val)，
结果发现，父组件里的isAmazon并没有改变。

于是乎，我把名字改了改：isamazon.sync="isAmazon"；this.$emit('update:isamazon',val)，
然后就成功了。。
这让我百思不得其解，因为vue的文档上说的是监听自定义事件推荐用kebab-case，结果这里kebab-case不管用了，一脸懵逼中。。。。

Answer 1

prop：:is-amazon.sync="isAmazon"，
this.$emit('update:is-amazon',val)，

this.$emit('update:isAmazon',val) 改成这样呢

Answer 2

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

这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之

.sync 修饰符

官方在这里是推荐使用 camelCased，但这段话我也看不太懂，希望有人可以分析一下

Answer 3

自定义事件用kebab-case, 自定义属性用camelCased

Answer 4

使用sync修饰符的话，vue应该是会统一转换为驼峰命名法，即：
v-on:update:isAmazon="isAmazon = $event"
因为vue传值时候属性需要用camelCased，自定义事件才用kebab-case
所以，你this.$emit('update:is-amazon',val)是没生效的
正确的写法应该是使用驼峰命名
isAmazon.sync="isAmazon"；this.$emit('update:isAmazon',val)