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…

--

--

Nicky Christensen

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