• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Emit Events to Parent Components

Log in or subscribe for free to enjoy all this course has to offer!

Let's Review Events

You have learned a lot about how to communicate from parent to child components, but what about when you want to communicate up to the parent? The most common way is by emitting custom events.

In web development, events are actions or occurrences that happen during the use of a website. Common examples of events include:

  • When a user clicks on an item.

  • When a user presses the keyboard.

  • A form is being submitted.

  • A browser is being resized.

When these actions occur, the events are emitted so you can respond accordingly using techniques like event handlers. Events are also automatically passed an event object that contains extra features or information about the event. For example, when a user presses a key on the keyboard, the event object can let you know which one was pressed.

Creating a Custom Event

In the front-end world, handling events is a common occurrence. As you saw before with the  v-on  directive, you can easily listen to common events and trigger functions as desired. However, wouldn't it be great if you could define emitted custom events?

Luckily for you, this is very easy to do with the Vue's built-in  $emit  function. Let's see it in action! 

Using $emit

The  $emit  function takes two parameters:

  • The name of the event (which should be defined in kebab-case).

  • An optional payload you can use to pass data to the event listener.

src/ChildComponent.vue
<template>
<button @click="emitCustomEvent">Emit Event</button>
</template>
<script>
export default {
methods: {
emitCustomEvent() {
this.$emit('custom-event-name', { message: 'My custom message' })
}
}
}
</script>

Listening and Responding to an Emitted Event

Once an event is emitted, the parent component using the child component can listen to the event through the  v-on  directive. All you need to do is:

  1. Adding a  v-on  listener with the custom event name on the component emitting the event.

  2. Assigning it a method that receives the payload as the first argument if it exists.

src/ParentComponent.vue
<template>
<div>
<p>{{ message }}</p>
<!-- Listen for custom event here and assign a method -->
<ChildComponent @custom-event-name="setMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent'
export default {
components: { ChildComponent },
data () {
return {
message: 'Hi'
}
},
methods: {
// Define method that will use the payload to update the data property
setMessage(payload) {
this.message = payload.message
}
}
}
</script>

After that, it works as you expect!

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P3C3-Begin  branch.

Instructions

  1. Remove  addToShoppingCart  prop from  MenuItem 

  2. Create a new method called  updateShoppingCart  in  MenuItem  that emits an event called  add-items-to-cart  to  Home.vue  to update the cart.

Let's Recap!

In this chapter, you learned how to:

  • Define custom events in components.

  • Emit custom events from child components.

  • Listen to custom events from child components.

  • Use the payload from custom events to perform additional actions.

In the next lesson, you'll learn about a new technique for passing data down to components: slots.

Example of certificate of achievement
Example of certificate of achievement