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

How can I monitor the "OnMouseNotMoving" event using jQuery?

React navigator appears stuck and unable to navigate between screens

Difficulty encountered when positioning a container using BootStrap 4

Retrieving information from CRM online utilizing the Web API

Experience some issues with the NextJS beta app router where the GET request fails when using fetch, but surprisingly works

How to style the background color of the selected option in a <select> element using

Is it possible to launch a React application with a specific Redux state preloaded?

I'm having trouble getting Three.js to properly display a scene imported from an OBJ file

Guide to updating information inside of script tags in html using javascript

There seems to be a caching issue in ReactJS and Spring Data Rest that could be causing problems with

Tips for aligning the camera to ensure the object maintains a consistent pixel width and height on the screen

Unable to reach the prototype of the object

Unable to assign value to Ref data property in Vue3 due to undefined item

Is it possible to use a '.JS' file downloaded through Node Package Manager (npm) directly in a web browser?

The significance of the "? :" operator in JavaScript

The es6 object class is not defined

Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

Error: Attempting to access a property named '_updatedFibers' on an undefined object is not possible due to a TypeError

Run the jQuery script once it has been successfully loaded using jQuery's .load method

Error: The term 'RequestCompleted' is not recognized by Microsoft JScript