Subscribe on changes!

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

avatar
Jan 12th 2021

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

avatar
Jan 12th 2021

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

avatar
Jan 12th 2021

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.

avatar
Jan 12th 2021

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

avatar
Jan 14th 2021

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...

avatar
Jan 14th 2021

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