Unintentional $event value setting on customized event

[GYHHAHA]

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNp9UstOwzAQ/JWVhdRWKi0ITiEgHuoBDoCAoy8h2RaDX7Kd0CrKv7N2XwGh3uyd2Z2xZ1t2Y+2kqZFlLPelEzaAx1DbK66FssYFuPsQsnKoYe6MgsFkui3EtsHFjteCwzl0G9oG47o02gdQq8davaODy8ganowIy6drQZKiS0BlZRGQbgD5TvRarY6xQR0uOesNOUo1zqaJ3rZ7ga6Lk3vT2JgFTy7mYjH59EbTS9vYxFlplBUS3ZMNglxylkFCIlZIab4fUi24GsfbevmB5dc/9U+/jDXOnh16dA1ytsNC4RZIZiM8e33EJZ13oDJVLYl9AHxBb2QdPa5pt7WuyHaPl9zepxyEXrz52TKg9ttHRaOR2SU+Z5TN3YGn7+2eTc5TH9cd/WI/97/rArLQC4oo0Cj683XoqETwFFaFc6FxFm95UhliBgO1msUMB2OwhStUBjoFOMqgMaKi/eiuhgfXJK9EA9elFOUXKR9FtWFv6umIrCQUFOZTIseeX5vR/QBrQgIt

Steps to reproduce

Directly click the div button.

What is expected?

Two paths:

• $event variable should be dropped for customized event.
• keep $event but refer to an object with Event type

What is actually happening?

$event refers to the first parameter from $emit function call

System Info

No response

Any additional comments?

No response

[quiteeasy]

Probably, we should clarify in the Vue.js documentation for the v-on directive how inline function statements are parsed when using the $event variable. The format $event => ...function code might not be immediately clear to all users and could result in confusion or unintended behavior if not explained thoroughly.

[LinusBorg]

keep $event but refer to an object with Event type

When we talk about custom events in Vue, we do not talk about CustomEvent instances from the DOM. We talk about Vue events, and this is how they work.

It's expected and documented behavior, so changing it would be a breaking change anyway.

I think the docs you link to do show at the end of the section that custom events also receive $event, and that it will refer to the event's payload

@quiteeasy If you have a suggestion on how to make it clearer though, the docs team over at the docs repo would be happy about an issue or PR.

I'll close this as it's not a bug.