Emitting Events in Vue.js — Communicating from Child to Parent

Emitting Events in Vue.js

In Vue.js, emitting events is how a child component sends information back to its parent. It’s the opposite of props and allows components to communicate clearly.

Why Emit Events?

• To notify parent components about user actions
• To keep logic and UI separate and clean

Example: Emitting an Event

// Parent Template
<child-button @sayHello="handleHello" />

<script>
  app.component('child-button', {
    template: `<button @click="$emit('sayHello')">Click Me</button>`
  });

  const app = Vue.createApp({
    methods: {
      handleHello() {
        alert("Hello from the child component!");
      }
    }
  });

  app.mount('#app');
</script>

Explanation:

The child emits a custom event sayHello, and the parent listens to it using @sayHello. When clicked, the alert is triggered in the parent.

Best Practices:

• Use clear and descriptive event names
• Keep event logic inside the parent

In the next post, we’ll learn how to use v-model for two-way binding with custom components!

Tags: #VueJS #EmitEvents #FrontendDev #VueComponents #VueNexus