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 event!')
})

The $emit method also sends a 'play' event to the parent component. We can listen to it in the parent component template with the v-on directive just like we did before:

<card v-on:play="handlePlay" />

You can also use the v-bind shorthand:

<card @play="handlePlay" />

We can also add as many arguments as we like that will get passed to the handler methods:

this.$emit('play', 'orange', 42)

Here, we emitted a 'play' event with the following two arguments-- 'orange' and 42.

In the handle, we can get them via the arguments, as follows:

handlePlay (color, number) {
  console.log('handle play event', 'color=', color, 'number=', number)
}

The color argument will have the 'orange' value and the number argument will have the 42 value.

Like we saw in the preceding section, custom events are completely separate from the browser event system. The special methods--$on and $emit--are not aliases to the standard addEventListener and dispatchEvent. That explains why we need the .native modifier on components to listen to browser events such as 'click'.

Back to our card component, we just need to emit a very simple event to tell the parent component that the card is being played:

1. First, add the method that will emit the event:

      methods: {
        play () {
          this.$emit('play')
        },
      },

1. We would like to call this method when the user clicks on the card. Just listen to a browser click event on the main card p element:

      <p class="card" :class="'type-' + def.type" @click="play">

1. We are done with the card component. To test this, listen to the 'play' custom event in the main component template:

      <card :def="testCard" @play="handlePlay" />

Now, the handlePlay method will be called whenever the 'play' event is emitted.

We could just have listened to a native click event instead, but it's in most cases a good idea to use custom events to communicate between components. For example, we could also emit the 'play' event when the user uses another method, such as using the keyboard to select the card and pressing Enter; we won't implement that method in this book though.