The developers guide to emits in Vue3

Nicky Christensen
5 min readJul 20, 2023

Vue is one of the most versatile, flexible and powerful javascript frameworks for building great web applications. One of the most important concepts and key features in Vue is the ability to facilitate communication between components in your apps. Lets take a deep dive, and explore the concept of “emits” in Vue and understand how they enable communication between parent and child components in a smooth and seamless way.

  1. What are emits in Vue
  2. Why are emits useful
  3. Component communication examples
  4. How to type emits correctly using Typescript

What are emits in Vue

One of the core concepts in Vue applications architecture lies the parent-child relationship between components. Parent components often need to interact with their children, and vice versa! We use this concept to create complex and interactive user interfaces. While props enable the flow of data from parent to child components, “emits” enable the flow of data from child to parent components

Basically, “emits” are a concept in Vue that allows for child components to communicate with their parent components. When using emits in Vue, you can emit back a custom event with data (optional) to the parent component. The parent component can listen for the event and handle it’s own “response” accordingly. It’s a powerful mechanism that facilitates seamless communication between child and parent components!

Why are emits useful

Emits provides a structured and decoupled way for components to interact with their parent components. The allows for creating apps that are more maintainable and scalable. By utilizing emits, we can create reusable child components that can be used in various contexts without tightly coupling them to their parent components.

Emits play a vital role in achieving a high level of decoupling between child and parent components. When child components emit events to their parents, they do not directly manipulate the parent’s state or invoke parent methods. Instead, emits provide an abstraction that allows parent components to decide how to handle the events. This separation of concerns promotes a more maintainable and scalable…

--

--

Nicky Christensen

FE Lead at Rig.dev - Just a guy who speaks about frontend, tech & leadership - Follow & connect @ https://www.linkedin.com/in/dknickychristensen/