Subscribe on changes!

Event listeners passed as attributes cause unexpected behaviour

avatar
Nov 28th 2020

Version

3.0.3

Reproduction link

https://codesandbox.io/s/elastic-christian-33req?file=/src/components/GrandChild.vue

Steps to reproduce

  1. Open https://codesandbox.io/s/elastic-christian-33req?file=/src/components/GrandChild.vue
  2. Observe double alert from App and Child components

What is expected?

Alert only from Child

What is actually happening?

Alert from App and Child


As I understood it is not a bug, more like a caveat, so it would be cool to have detailed explanation of what is happening in docs

avatar
Nov 28th 2020

You need inheritAttrs: false in Child.vue. This is documented: https://v3.vuejs.org/guide/component-attrs.html#attribute-inheritance

avatar
Nov 28th 2020

It is. But isn't it unexpected that listeners are explicitly bound to wrong component?

avatar
Nov 28th 2020

No, you have to either disable attribute inheritance or declare the emits option https://v3.vuejs.org/guide/migration/emits-option.html