$emit with native event name like 'click' causes the method to fire twice
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
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
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.
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
you can also define
click
as a component event by addingexport 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...