How to emit events in Vue

Emitting events is fundamental for child-to-parent communication in Vue applications, enabling components to notify parents of state changes and user interactions. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented event emission in thousands of Vue components for button clicks, form submissions, and custom interactions in enterprise component libraries. From my expertise, the most effective approach is to use the $emit method with descriptive event names and proper payload data. This method provides clean component communication patterns while maintaining loose coupling between parent and child components.

Use $emit method to send custom events from child components to parent components.

<template>
  <div>
    <button @click="handleClick">{{ label }}</button>
    <input
      v-model="inputValue"
      @input="handleInput"
      @keyup.enter="handleSubmit"
    >
  </div>
</template>

<script>
export default {
  props: ['label', 'initialValue'],
  emits: ['click', 'input', 'submit'],
  data() {
    return {
      inputValue: this.initialValue || ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('click', { timestamp: Date.now() })
    },
    handleInput() {
      this.$emit('input', this.inputValue)
    },
    handleSubmit() {
      this.$emit('submit', { value: this.inputValue })
    }
  }
}
</script>

<!-- Parent component usage: -->
<!-- <CustomInput @click="onButtonClick" @input="onInputChange" @submit="onSubmit" /> -->

The $emit method sends custom events from child to parent components. The first parameter is the event name, and optional additional parameters become the event payload. Define emitted events in the emits option for documentation and validation. Parent components listen to custom events using @event-name="handler" syntax, just like native DOM events. This creates a unidirectional data flow: props down, events up, maintaining clear component boundaries and reusability.

Best Practice Note:

This is the same approach we use in CoreUI Vue components for consistent parent-child communication patterns. Use kebab-case for event names in templates (@custom-event) and camelCase in JavaScript (this.$emit('customEvent')). Always declare emitted events in the emits option for better component documentation and development experience.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


About the Author