我有两个组件，一个包含另一个。
当我从孩子触发事件时，我无法在父母那里收到它。
子组件
this.$emit('myCustomEvent', this.data);
父组件
<parent-component v-on:myCustomEvent="doSomething"></parent-component>
但是，当我在两个地方都将事件名称更改为 my-custom-event 时，它可以正常工作。
Vue 以某种方式转换事件名称？或者可能是什么问题？ 我阅读了docs 关于组件命名约定的内容，但没有与事件命名相关的内容
【问题讨论】：
标签： vue.js vuejs2 vue-component
Vue.js 不仅会转换 xml 标签（组件名称），还会转换属性，所以当您生成事件时
$emit('iLikeThis')
您必须将其处理为：
v-on:i-like-this="doSomething"
来自文档：
注册组件（或props）时，可以使用kebab-case， camelCase 或 TitleCase。 ...
不过，在 HTML 模板中，您必须使用 kebab-case 等价物：
【讨论】：
对于自定义事件，最安全的选择是只使用一个小写的事件名称，所有这些事件名称都拼在一起。目前，即使是 kebab-case 也会有问题。
this.$emit('mycustomevent', this.data);
然后，在父组件中，随意绑定到驼峰式函数
<parent-component v-on:mycustomevent="doSomething"></parent-component>
它有点笨拙，但它有效。
Source（表示 kebab-case 也不起作用）
【讨论】：
this.$emit('my-event', this.data); 和 v-on:my-event="doSomething" 工作得很好。
建议始终使用kebab-case 来命名自定义事件。 小写事件，按照@KoriJohnRoys 的建议，全部拼凑在一起也可以，但更难阅读。事件命名不建议使用camelCase。
official documentation of Vue.JS 在事件名称主题下声明如下：
事件名称
与组件和道具不同，事件名称不提供任何自动大小写转换。相反，发出事件的名称必须与用于侦听该事件的名称完全匹配。例如，如果发出驼峰式事件名称：
this.$emit('myEvent')听 kebab-cased 版本没有效果：
<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 作为事件名称。
【讨论】：
this.$emit('my-event')。在我的$emit 上使用骆驼皮套不起作用：耸耸肩：
除了@ssc-hrep3关于kebab-case的点
.sync 的文档建议使用 update:myPropName 模式
【讨论】：