CODEWITHSUNDEEP
vue.jsparent-child
Pok3r Princ3
Pok3r Princ3

Reputation: 147

How to correctly pass data from child to a parent component using the event bus?

I'm using a stepper, and I'm trying to move to the next step via a button click (the stepper itself is a standalone parent component (view), here's a link to said stepper: https://vuetifyjs.com/en/components/steppers#stepper). However, using the example referenced in the link above, I moved the button that takes you to the next step in a child component (a table) and I'm trying to trigger the event that does the stepping via an event bus.

The steps that I've taken so far are:

  1. I created an event-bus.js file, populated it with:

    import Vue from "vue";
export const EventBus = new Vue();

    and I have imported it in both the parent (stepper) & the child components (table with button in it)

  2. I imported the child component into the parent.

  3. Here's how the EventBus set-up looks in my child component:

    <v-btn
   color="#009af9"
   large
   dark
   @click="stepperPageOne()">Next</v-btn>

data: () => ({
    e1: 0
}),
methods: {
   stepperPageOne() {
       EventBus.$emit("changePage", this.e1++);
       console.log(this.e1);
   }
}

  4. Here's how it looks in the parent component:

    <v-stepper-step :complete="e1 > stepperCatcher()" step="1" color="#68C977">Schedule
</v-stepper-step>

data: () => ({
   e1: 0
}) ,
methods: {
    stepperCatcher() {
        EventBus.$on("changePage");
        console.log("changePage");
    }
}

When I click the button in the child component, the event associated with it fires (I've logged it), but the stepper doesn't change steps.

When I refresh the view where the stepper is located, the event associated with it that is supposed to catch when i click the button in it's child component immediately fires twice.

Can someone help me out how to achieve the desired effect?

Upvotes: 0

Views: 656

Answers (1)

Decade Moon
Decade Moon

Reputation: 34286

I don't quite understand the purpose of this:

:complete="e1 > stepperCatcher()"

and this:

stepperCatcher() {
  EventBus.$on("changePage");
  console.log("changePage");
}

stepperCatcher() isn't returning anything so the condition e1 > stepperCatcher() is nonsensical.

You're emitting the event correctly but you are not listening to it correctly.

You need to register an event listener for the event in the created hook of your parent component and then unregister the listener in the destroyed hook. Something like this:

created() {
  EventBus.$on('changePage', this.handleChangePage)
},

destroyed() {
  EventBus.$off('changePage', this.handleChangePage)
},

methods: {
  handleChangePage(e1) {
    // Handle the event here
  }
}

See the docs for $on.

Upvotes: 1

Related Questions