Handling Custom events with vue $emit function

In this guide, we will look at how to handle custom emitted events using the vue $emit() function.

It’s noteworthy that all vue components have the $emit function and this basically allows us to pass custom events around our component tree.

In somewhat simpler terms, the $emi()t function lets us pass functions as props.

Say I have a child component that triggers a click event.

<script>
export default {
  methods: {
    onClick(event) {
      this.$emit('clicked', 'someValue')
    }
  }
}
</script>

We can have a parent component that listens or receives this event and handles it as pleases

<template>
  <div>
    <child @clicked="doSomething"></child>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething(value) {
      console.log(value);
    },
  },
};
</script>