CODEWITHSUNDEEP
vue.jsvuejs2
petitkriket
petitkriket

Reputation: 184

retrieve $event object from emit event in parent component

I am emitting an event in a child component so I can, if I need to, prevent it from happening in the parent. Is there a way to retrieve event object so I can prevent it in the parent component like this ?

// child component event
this.$emit('navigationTab');

// parent template event bind
@onTab="on_tab($event)"

// parent handler method
on_tab(event) {
  event.preventDefault
  // ...logic etc
}

It only works if y pass the event object like this I wish to catch $event directly without sending the object inside the event, which is probably already sent in the emit

// child component event
this.$emit('navigationTab', event);

// parent template bind
@navigationTab="on_tab"

// parent handler method
on_tab(event) {
  event.preventDefault
  // ...logic etc
}

Upvotes: 0

Views: 1165

Answers (1)

Michal Levý
Michal Levý

Reputation: 37793

  1. Event argument is automatically passed as an parameter into handler method (see example bellow)
  2. You can't use preventDefault() on custom events, only on native browser events. And of course you don't need to because there is not any "default" behavior for custom events (emitted with $emit)

const myComponent = Vue.component('myComponent', {
  template: `
    <div>
      <button @click="$emit('myEvent', 'event payload')">Click me!</button>
    </div>
  `
})

const app = new Vue({
  components: {myComponent} ,
  template: `
    <div>
      <myComponent @myEvent="handle" />
    </div>
  `,
  methods: {
    handle(event) {
      console.log("Event received:", event)
    }
  }
})
app.$mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Upvotes: 1

Related Questions