$emit with native event name like 'click' causes the method to fire twice

[chemist-repo]

Version

3.0.5

Reproduction link

https://codesandbox.io/s/sad-resonance-nqdyy?fontsize=14&hidenavigation=1&theme=dark

Steps to reproduce

https://codesandbox.io/s/sad-resonance-nqdyy?fontsize=14&hidenavigation=1&theme=dark

What is expected?

Once with emit

What is actually happening?

Twice with native event and with emit

[edison1105]

see #2966

[Mr14huashao]

The child-component contains a click event,
The parent-component transfers a click event to the child component.
Two responses are correct.
One is the event of the parent-component,
and the other is the child-component invokes the parent-component method and prints 'test-click'.

<button @click="$emit('click', 'test-click')">test-click</button> -----> <button>test-click</button> will become normal

[chemist-repo]

This will lead to more time consuming migration. And it doesn't look normal.

inheritAttrs: false - this really works, but it partially solves the problem, I may want to keep which attributes and rename which other.

[LinusBorg]

you can also define click as a component event by adding

export default {
  emits: ["click"],
}

With this, Vue will no longer add a native eventlistener for this event, and you can control it with $emit

[muelbr]

you can also define click as a component event by adding

export default {
  emits: ["click"],
}

With this, Vue will no longer add a native eventlistener for this event, and you can control it with $emit

This seems not working with web-components, e.g.
https://github.com/material-components/material-components-web-components/tree/master/packages/select

mwc-select has internally a change-event which is leaking up from the vue component which uses mwc-select (with emit 'change' declared). inheritAttrs: false works...

[LinusBorg]

Can't say anything about that with a one-liner description. Feel free to open a new issue if you have a reproduction going.