javascript - Do custom events propagate up the component chain in Vue 3? - Stack Overflow

Custom events didn't propagate in Vue 2. Is there a change in Vue 3 because, as the following example shows, it looks like custom events bubble up the ponent chain:

const Comp1 = {
  template: `
    <button @click="this.$emit('my-event')">click me</button>
  `
}

const Comp2 = {
  ponents: {
    Comp1
  },
  template: `
    <Comp1/>
  `
}

const HelloVueApp = {
  ponents: {
    Comp2
  },
  methods: {
    log() {
      console.log("event handled");
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

<script src="@next"></script>

<div id="hello-vue" class="demo">
  <Comp2 @my-event="log"/>
</div>

Custom events didn't propagate in Vue 2. Is there a change in Vue 3 because, as the following example shows, it looks like custom events bubble up the ponent chain:

const Comp1 = {
  template: `
    <button @click="this.$emit('my-event')">click me</button>
  `
}

const Comp2 = {
  ponents: {
    Comp1
  },
  template: `
    <Comp1/>
  `
}

const HelloVueApp = {
  ponents: {
    Comp2
  },
  methods: {
    log() {
      console.log("event handled");
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

<script src="https://unpkg./vue@next"></script>

<div id="hello-vue" class="demo">
  <Comp2 @my-event="log"/>
</div>

• javascript
• vue.js
• vuejs3

Share Improve this question Follow edited Sep 8, 2022 at 11:27 Lee Goddard 11.2k55 gold badges5151 silver badges6969 bronze badges asked Oct 30, 2020 at 17:49 marzelinmarzelin 11.6k55 gold badges3838 silver badges5050 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Yes, by default they now fall through in VUE v3

You need to define inheritAttrs: false to prevent that

link to docs, though it doesn't seem to indicate that it affects the events too. It just mentions attributes, but events are part of attributes($attrs).

const Comp1 = {
  template: `
    <button @click="this.$emit('my-event')">click me</button>
  `
}

const Comp2 = {
  ponents: {
    Comp1
  },
  template: `
    <Comp1/>
  `,
  inheritAttrs: false 
}

const HelloVueApp = {
  ponents: {
    Comp2
  },
  methods: {
    log() {
      console.log("event handled APP");
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')

<script src="https://unpkg./vue@next"></script>

<div id="hello-vue" class="demo">
  <Comp2 @my-event="log"/>
</div>

You have to handle the event into Comp2 :

<Comp1 @my-event="this.$emit('my-event')"/>