Component events are transformed to camelCase
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
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 🙏