Vue.js 2 Web Development Projects

Child-to-parent communication with custom events

Previously, we used props to communicate from a parent component to its children. Now, we would like to do the opposite and communicate from one child component to its parent. For our card component, we would like to tell the parent component that the card is being played by the player when they click on it. We can't use props here, but we can use custom events. In our components, we can emit events that can be caught by the parent component with the $emit special method. It takes one mandatory argument, which is the event type:

this.$emit('play')

We can listen to the custom events inside the same Vue instance with the $on special method:

this.$on('play', () => { console.log('Caught a play ...