Vue.js 自定义事件命名

Question

我有两个组件，一个包含另一个。

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

子组件

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

父组件

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

但是，当我在这两个地方将事件名称更改为 my-custom-event 时，它就起作用了。

Vue 以某种方式转换事件名称？或者有什么问题？我阅读了有关组件命名约定的 文档，但没有与事件命名相关的内容

原文由 xAoc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

建议始终使用 kebab-case 来命名自定义事件。 按照@KoriJohnRoys 的建议，将小写事件全部拼凑在一起也可以，但更难阅读。事件命名不推荐使用 camelCase 。

Vue.JS 的官方文档 在事件名称主题下说明如下：

事件名称

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

 this.$emit('myEvent')

听 kebab-cased 版本不会有任何效果：

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

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

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

原文由 ssc-hrep3 发布，翻译遵循 CC BY-SA 4.0 许可协议