Vue $emit() Usage – Communicate from Child to Parent (2025 Guide)

Introduction – What Is $emit() in Vue?

In Vue.js, $emit() is the standard way for a child component to send messages to its parent. While props let parents pass data down, $emit() allows children to pass data or trigger actions up the component hierarchy.

In this guide, you’ll learn:

• What $emit() does and when to use it
• How to pass event data with $emit()
• Using custom events with v-on
• Best practices and real-world examples

What Is $emit()?

The $emit() method in Vue triggers a custom event that the parent component can listen to.

Syntax:

this.$emit('eventName', payload)

• 'eventName' is the custom event name.
• payload is optional data sent with the event.

Simple Child-to-Parent Communication

Child Component (Child.vue)

<template>
  <button @click="notifyParent">Click Me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childClicked');
    }
  }
}
</script>

Parent Component

<Child @childClicked="handleClick" />

methods: {
  handleClick() {
    alert('Child component clicked!');
  }
}

The parent listens for the childClicked event and responds accordingly.

Passing Data with $emit()

You can pass any data type as a second argument.

Child Component:

this.$emit('add-to-cart', product.id);

Parent Template:

<ProductCard @add-to-cart="handleAddToCart" />

Parent Method:

methods: {
  handleAddToCart(productId) {
    console.log('Product added with ID:', productId);
  }
}

This allows dynamic interaction based on user input or component state.

Using $emit() with Form Inputs

Child Input Component:

<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  props: ['modelValue']
}
</script>

Parent Component:

<TextInput v-model="username" />

Enables two-way binding using v-model and the modelValue prop convention in Vue 3.

Real-World Example – Modal Close Button

Modal Component:

<template>
  <div class="modal">
    <button @click="$emit('close')">X</button>
    <slot></slot>
  </div>
</template>

Parent:

<Modal v-if="isOpen" @close="isOpen = false" />

The child modal tells the parent to update its isOpen state.

Emitting with Arguments & Multiple Params

this.$emit('submit-form', {
  name: this.name,
  email: this.email
});

The parent can receive the entire form object and process it accordingly.

Common Mistakes with $emit()

Event name typo between child and parent
Always double-check spelling and casing.

Not using kebab-case in template bindings
Event names in the template must be in kebab-case, even if defined in camelCase.

<ChildComponent @form-submitted="handleSubmit" />

Summary – Recap & Next Steps

Vue’s $emit() method allows child components to send events and data to their parents, keeping your UI modular and maintainable. It’s a foundational piece of Vue’s unidirectional data flow.

Key Takeaways:

• $emit() lets children trigger events the parent can listen to
• Can pass any type of data as payload
• Works great with custom form controls and event-driven UIs
• Use kebab-case in templates for event names

Real-World Relevance:
Used in buttons, modals, cards, form components, and anywhere child elements need to interact with their parent containers.

FAQ Section

What is $emit() used for in Vue?

It allows a child component to send a custom event to its parent.

How do I pass data with $emit()?

Pass it as a second argument:

this.$emit('submit-data', this.formData)

Can $emit() send multiple values?

Yes. Send an object or array:

this.$emit('send-all', { user, token })

Why is @eventName not working in the parent?

Likely causes: event name mismatch, or missing kebab-case in the parent template.

Is $emit() available in the Composition API?

Yes, via the setup() function:

setup(props, { emit }) {
  emit('clicked');
}