Vue.js自定义事件命名

Question

我有两个组成部分，一个包含另一个。

当我从孩子那里触发事件时，我不能在父母那里收到它。

子组件

this.$emit('myCustomEvent', this.data);

父组件

<parent-component v-on:myCustomEvent="doSomething"></parent-component>

但是，当我在两个地方都将事件名称更改为my-custom-event时，它都可以工作。

Vue以某种方式转换了事件名称？还是有什么问题？我阅读了有关组件命名约定的文档，但与事件命名没有任何关系

Answer 1

建议始终将其kebab-case用于自定义事件的命名。按照@KoriJohnRoys的建议，将所有小写的事件粉碎在一起，也可以使用，但更难阅读。不建议将其camelCase用于事件命名。

Vue.JS的官方文档在“事件名称”主题下声明了以下内容：

活动名称

与组件和道具不同，事件名称不提供任何自动大小写转换。而是，发出的事件的名称必须与用于侦听该事件的名称完全匹配。例如，如果发出一个camelCased事件名称：

this.$emit('myEvent')

听烤肉串包装的版本无效：

<my-component v-on:my-event="doSomething"></my-component>

与组件和道具不同，事件名称永远不会在JavaScript中用作变量或属性名称，因此没有理由使用camelCase或PascalCase。另外，DOM模板中的v-on事件侦听器将自动转换为小写字母（由于HTML不区分大小写），因此v-on：myEvent将变为v-on：myevent，从而使myEvent无法收听。

由于这些原因，我们建议您始终使用kebab-case作为事件名称。

Answer 2

除了@ssc-hrep3 关于 kebab-case

.sync的文档建议使用该模式update:myPropName

Answer 3

Vue.js 不仅转换 xml 标签（组件名称），还转换属性，因此当您生成事件时

$emit('iLikeThis')

你必须将其处理为：

v-on:i-like-this="doSomething"

来自文档：

注册组件（或 props）时，可以使用 kebab-case、camelCase 或 TitleCase。...

但在 HTML 模板中，您必须使用 kebab-case 等效项：