Passing data through events from a parent component to a child component in Vue.js using the $emit method

Question

Passing data through events from a parent component to a child component in Vue.js using the $emit method

Having trouble making this work!

I have included the $emit code in my click event to trigger a custom event.

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

Next, I catch this event on the component within the same Vue application. I currently handle this on the template, but would prefer handling it in the code:

<business-hours :injected-data="hours" :injected-days="data.days[0]" v-on:addBusinessHours="test()">

Just a heads up, my business-hours component is nested within another component.

javascript vue.js

Answer 1

Answer №1

If you want to efficiently emit events from components, I suggest using a separate class for that purpose.

To start, create an Event class, such as EventBus in this example:

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

Next, import the EventBus into the component where you want to trigger events:

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

You can then dispatch the event like so:

<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); }

In your business-hours component, remember to import EventBus and add an event listener to react to the emitted event:

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

This approach will help you effectively send and receive events with Vue. For further insights, you may refer to this tutorial:

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

Best of luck!

Answer 2

If you want to efficiently emit events from components, I suggest using a separate class for that purpose.

To start, create an Event class, such as EventBus in this example:

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

Next, import the EventBus into the component where you want to trigger events:

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

You can then dispatch the event like so:

<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); }

In your business-hours component, remember to import EventBus and add an event listener to react to the emitted event:

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

This approach will help you effectively send and receive events with Vue. For further insights, you may refer to this tutorial:

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

Best of luck!

Passing data through events from a parent component to a child component in Vue.js using the $emit method

Answer №1

Similar questions

What is the best way to set breakpoints in a SCSS file when using Vuetify?

Having trouble sending a POST request from my React frontend to the Node.js backend

The Node.js server is outputting an HTTP status code of 404

What is the best way to send an array of objects to a Jade template?

Using the 'type' field as a parameter in a Vue2 component object

Compilation of SCSS is not possible due to a SASS error - there are no .sass files present

What could be causing my redux-observable to not be triggered as expected?

Access the vue-router router-link component

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

Issue with Jest Test Trigger Event Not Invoking Method

Preventing Duplicate Random Numbers in Vue 3 and JavaScript: A Guide

Utilizing Jquery Autocomplete with multiple arrays for data sourcing

"Enhanced jQuery confirmation dialog plugin with full screen functionality and automatic

Prevent users from deleting options in Autocomplete by disabling the backspace key

What is the most effective approach for addressing errors in both the server and client sides while utilizing nodejs and express?

ReactJS encountered an error: [function] is not defined, July 2017

Looking to categorize and sum the values within an array of objects using JavaScript?

Saving real-time information to MongoDB with Node.js

"Encountered a Http502 error while running the Node component (code provided for reference purposes

Issue with VueJS beforeRouteEnter hook not triggering