fix(runtime-core): kebab-cased event handler as prop called on emit #9813
Conversation
| @@ -152,6 +152,9 @@ export function emit( | |||
| let handlerName | |||
| let handler = | |||
| props[(handlerName = toHandlerKey(event))] || | |||
| // try kebab-case with on- (#9812) | |||
There was a problem hiding this comment.
There was a problem hiding this comment.
In fact, it is not recommended to use :on-some-event to pass events. This will be passed to the component as props. The design of vue intentionally distinguishes props from event , that is, props, uses the v-bind directive, and event uses the v-on directive. I recommend you to use v-on:some-event
There was a problem hiding this comment.
Good catch, but that's another issue, when a string is passed through an event handler prop (no matter kebab-case or camelCase) you can check in current version with camelCase
I know that is not recommended to use props to pass event handler, but as you can see in docs, currently it's supported for camelCase
There was a problem hiding this comment.
The docs are just to document that hidden behaviour, which is not recommended to be widely used! As it is stated in the docs:
Because of this, it is recommended to use emit('event') instead of props.onEvent when emitting events.
Behaviour might change, since is not stable.
There was a problem hiding this comment.
Thanks for the clarification @pikax, the issue is when using emit('event') and the listener is defined as a hyphenated prop :on-event (the recommended case for props).
If it is not in the spec, I'm OK about this PR being closed and the issue, and add some clarification in docs about it.
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
close #9812