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

HoshinoKozo
  • 55

今天用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不管用了,一脸懵逼中。。。。

回复
阅读 1.4k
4 个回答
✓ 已被采纳

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

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

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

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

.sync 修饰符

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

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

使用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)

你知道吗?

宣传栏