📢 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');
}

---

Share Now :