kebab-cased event handler as prop not called on emit
Vue version
3.4.0-alpha.4
Link to minimal reproduction
Steps to reproduce
Click on the button
What is expected?
App eventHandler should be called to change the button color to green
What is actually happening?
App eventHandler is not called, so the button color doesn't change
System Info
No response
Any additional comments?
Also, it must be skipped from component props (or attributes) if the prop key is a declared emit event listener
I don’t think this is a bug, I think :on-some-event will be processed as props, binding events in vue should use v-on or @ abbreviation
v-on:some-event
or
@some-event
If you use props to pass events, you should trigger the event through props in the child component.
<script setup>
defineProps(['onSomeEvent'])
</script>
<template>
<div>
<button @click="(e) => onSomeEvent(e)">trigger</button>
</div>
</template>
@leoelz usage
Thanks @baiwusanyu-c and @Simon-He95, I know about the other ways to use it and the recommendations. But the possibility of using <Comp :onSomeEvent="" /> is allowed, but kebab-case is recommended as prop naming, that's why I've worked on this fix.
Here is the doc: https://vuejs.org/guide/components/events.html#events-props
And here is the playground with different tests I've done, where I've found the issue with kebab-case.
When using events starting with:, props.event needs to be used internally to trigger them, while events starting with @ use emit. The bottom layer of Vue seems to convert all camel cases into hyphen.
Currently when kebab-case is not used, it makes no difference wether props.event() or emit('event') is used, please check here.
I think, in favor of abstraction principles, it shouldn't be necessary to know how it is internally triggered.