Why does this component emit event in Vue3 ??

[junholee14]

Code :
https://codesandbox.io/embed/nervous-keller-i046pi

Expectation :

1. v-group emits "dragend" event in MyGroup.vue

• child component: VGroup.vue

What happens :

1. v-group emits "dragend" event in MyGroup.vue

• child component: VGroup.vue

2. and then MyGroup.vue emits "dragend" event

I don't understand why this is happening because i don't specify to emit "dragend" event in MyGroup.vue.
It works as i expect in Vue2 but not Vue3

[liulinboyi]

The reason is v-on Listener Inheritance.

https://vuejs.org/guide/components/attrs.html#v-on-listener-inheritance

You can add inheritAttrs: false to disabling Attribute Inheritance.

https://vuejs.org/guide/components/attrs.html#disabling-attribute-inheritance

Modify the Codes:

MyGroup.vue

<template>
  <v-group :x="100" :y="100">
    <v-rect :x="0" :y="0" :width="100" :height="100" fillStyle="red" />
    <v-rect :x="50" :y="50" :width="100" :height="100" fillStyle="blue" />
  </v-group>
</template>
<script>
import VGroup from "./VGroup";
import VRect from "./VRect";
export default {
  inheritAttrs: false,
  components: { VRect, VGroup },
};
</script>

or

MyGroup.vue

<template>
  <div>
    <v-group :x="100" :y="100">
      <v-rect :x="0" :y="0" :width="100" :height="100" fillStyle="red" />
      <v-rect :x="50" :y="50" :width="100" :height="100" fillStyle="blue" />
    </v-group>
  </div>
</template>
<script>
import VGroup from "./VGroup";
import VRect from "./VRect";
export default {
  components: { VRect, VGroup },
};
</script>

[chamyeongdo]

why is not vue2 like this? is this a feature from vue3? thank you for reply

[liulinboyi]

why is not vue2 like this? is this a feature from vue3? thank you for reply

#6433