Subscribe on changes!

Component events are transformed to camelCase

avatar
Nov 19th 2020

Version

3.0.2

Steps to reproduce

It is recommended to emit kebab-case events from components (per v3 docs and eslint vue/custom-event-name-casing rule).

The component:

export default defineComponent({
  name: "ResultsBar",
  emits: ["select-result"]
});

This is how it is used in a component:

<ResultsBar @select-result="onSelectResult($event)" />

It seems event names are transformed to camelCase before reaching the component, resulting in an error:

Extraneous non-emits event listeners (selectResult) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

What is expected?

Event name should be kept as is camelCase

What is actually happening?

Event name is transformed to camelCase

avatar
Nov 19th 2020

Duplicate of https://github.com/vuejs/vue-next/issues/2540


Please, search existing issues and pull requests before opening issues, it saves maintainers a lot of time 🙏