CODEWITHSUNDEEP
javascriptvue.jsvue-events
Can Cinar
Can Cinar

Reputation: 441

Vue Event from Parent (App.vue) To Another Component

I would like to emit an event from App.vue which is a main component to another component. EventBus.$emit from App.vue, EventBus.$on on child/another component is not working. Since there is no child relation directly between these, I cannot use @custom-event="" either

How can I throw an event from App.vue to another component?

That's what I do. It is working all of the other components. Here my components' folder structure

-src
-pages
  -main-page
    -MainPage.vue  $on
-event
-constant
-store
-router
App.vue  --> $emit
main.js

Upvotes: 0

Views: 229

Answers (1)

webnoob
webnoob

Reputation: 15924

You say the EventBus method isn't working but it should be so I'll assume you're doing it wrong. Do something like this:

Create eventBus.js

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

In any of your single file components, import it:

import { EventBus } from '/src/path/to/eventBus.js';

Trigger an event in a component:

EventBus.$emit('some-event-raised', { someData: "bob" })

In any other component, do the import again and then listen:

EventBus.$on('some-event-raised', obj => {
  console.log(`some-event-raised triggered [${obj.someData}]`)
});

Upvotes: 1

Related Questions