[Vuejs]-Vue.js $emit event from parent and receive it on a component (child)

3๐Ÿ‘

โœ…

Iโ€™d recommend you using a separate class in order to emit events from components.

First create your Event class, as an example, Iโ€™m calling EventBus.

/* Events.js */
import Vue from 'vue';
export const EventBus = new Vue();

Then you import to the component you wish to emit the values from:

import {EventBus} from '@/events.js'

Then you dispatch the event

<h2 class="form_section--header">Business Hours - <a href="javascript:void(0)" v-on:click="emitEvent('addBusinessHours', null)">Add New</a></h2>


emitEvent(name, params) { EventBus.$emit( name , params ); }

On your business-hours component you import the EventBus and add an event listener to listen to the dispatched event

created() { 
   EventBus.$on('addBusinessHours' , () => console.log('Business hours component received event from other component' );
}

That should give you a way forward towards sending and receiving events with Vue.
You can also check this tutorial for reference for a better understanding of how Events works.

https://medium.com/@andrejsabrickis/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

Good luck

๐Ÿ‘คgugateider

Leave a comment