kebab-cased event handler as prop not called on emit

[leoelz]

Vue version

3.4.0-alpha.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNU01vEzEQ/SuWhbSJlLWR0lNIqwCKBBwAATfMYbs7Sdz6S7Y3Dary3xnbaboNadWbx2888+Z53j197xzb9kBndB5aL10kAWLvroSR2lkfyUerHVl5q0nFeApSeiWMMKvetFFaQ2ALJn5qTKfAj3IwJvfCkAKw2Pg1RBbiXwWstcp6ckmqtQcw1Tth9sLMeemNXTGIoJ1qImBEyDz3n1lTB6uhzhUvBR22FJRwzJ3zwUM6oYV/rRvHboI1OGHmJA5AEHRWWKY7nCnFgm5idGHGedsZfNaBklvPDERunOYLTOO+N1Eilc7qxZRdsLd1o9ymYRe8kyEOYQZB19fe3gXwzHnbYUVBJ4OeHJEt+NqD6cCnUV7H4eTZOR4nKU+4JBqJBUq/R6ViaK1ZyfWJTi0qL1Hfby798lO9GqXs3Zd8F30Px5naDbS3Z+5vwq7M9t1DZjbQoexHgZc/v8IOz0dQ265Xh795BvwBwao+cSxpH/rDWhzzMtvP+dulWf8Ky10EEx6GSkSzGjk//0tauudGf6Q7ZdOBig/eOGMllDdEAlpG3PwOVtLAEoMw+l09bnX1Z4xueMkKndzmAx6v+xjReYtWyfY2+QHLjYbFJuRNcaKgV/+B4zkvBUpdXJhUeGAguv8H3M1lvA==

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

[baiwusanyu-c]

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

[baiwusanyu-c]

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>

[Simon-He95]

@leoelz usage

[leoelz]

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.

[Simon-He95]

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.

[leoelz]

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.