In Vue, data is typically passed from parent components to their children in a uni-directional fashion. This is transferred with , which are the properties or attributes we give to . props components For example, if we call a component , which has a prop called , that property would become available within the component itself, letting us do what we want to do with it. That way, the data is passed down to the child component when we declare it in the parent component or page: PageOne name name PageOne In most scenarios, props allow us to do everything we need to do with data. - from a child component to its parent. For this, we use , which lets us send data upwards, and then trigger an event in the parent component should an event be fired. Sometimes, however, we need to emit data upwards $emit $emit How works in Vue? $emit There are three ways to fire in Vue, depending on if you're using the Options API, Composition API, or inlining your events. $emit $emit within the Options API. this.$emit if used in your HTML template. $emit and if used in the Composition API. defineEmits emit . Let's say we have a counter component, which looks like this: Let's take a look at how this works, through a silly example <template> <button @click="$emit('counterEvent')">Click Me</button> </template> This component is stored in a file called . Our component can't be changed as it's used in other places, but it does have an event fired any time it is clicked. This is perfect since we can use this in our parent component. Counter.vue $emit So what if we want to add this component somewhere - for example, in our file - and use it to display the value of our counter. Let's try doing that now: App.vue <template> <h1>{{ counter }}</h1> <Counter @counter-event="incrCounter"/> </template> <script> import Counter from './Counter.vue' export default { // Add our components components: { Counter }, // Store our data data() { return { counter: 0 } }, methods: { incrCounter: function() { this.counter += 1; } } } </script> Let's break this down - first of all, we include our . Since there is an event called , we can attach that to our HTML. Whenever fires, it'll fire the , and thus the function within that property. anytime fires. Counter $emit counterEvent Counter $emit counterEvent Here, we run incrCounter counterEvent By doing that, we can also increase our data by 1, since that is what does. As such, we've emitted the click event upwards to our parent component. counter incrCounter Why did we use Kebab Case? You may notice that when we defined our event, we used camel case ( ), but when tracking the event, we used kebab case ( ). $emit counterEvent counter-event In , it is fine to use and interchangably since Vue 3 automatically converts to . In , this functionality does not exist, so just stick with for both. Vue 3 counterEvent counter-event counterEvent counter-event Vue 2 counter-event Passing Data with $emit Let's say instead, we want our components to define how much the should increase. If we want to do that, we can pass a second argument to the function, which is the value: counterEvent $emit <template> <button @click="$emit('counterEvent', 2)">Click Me</button> </template> , we are passing the value to our . Let's go back to our file. To leverage this value in , we need to write it as a function. Below, is the value: Here 2 counterEvent App.vue counterEvent n <template> <h1>{{ counter }}</h1> <Counter @counter-event="(n) => incrCounter(n)"/> </template> <script> import Counter from './Counter.vue' export default { // Add our components components: { Counter }, // Store our data data() { return { counter: 0 } }, methods: { incrCounter: function(value) { this.counter += value; } } } </script> Now, our counter will increase by the value put in the child component, allowing us to pass data to our parent component as well. As you'd expect, this is not limited to just numbers but can include any data structure - including objects and strings. Using with the Options API $emit We've shown a quite simple example, but we could also have written our child component using a function instead. Here is an example with the , using : Counter.vue Options API this.$emit <template> <button @click="emitFunction">Click Me</button> </template> <script> export default { emits: [ 'counterEvent' ], methods: { emitFunction: function() { this.$emit('counterEvent', 2) } } } </script> This may prove to be a slightly cleaner way to use , especially if you want to do other things along with using whenever a button is clicked. $emit $emit Adding your emit events to your prototype You may note that we also defined our emit event in on the prototype. This is good practice for two reasons: emits by showing which emit events are possible in this component. It lets you self-document the code , since Vue will throw an error if an emit event is used but not found in the array. It helps you keep track of deprecated emits emits Using with the Composition API $emit We can use with the Composition API - the only difference is we have to use instead. $emit defineEmits <template> <button @click="emitFunction">Click Me</button> </template> <script setup> import { defineEmits } from 'vue' const emit = defineEmits(['counterEvent']); const emitFunction = function() { emit('counterEvent', 2) } </script> is used to define a full list of all permissible events. Here, we only have one, . If you had more than one, you could define them as so: defineEmits emit counterEvent const emit = defineEmits(['counterEvent', 'anotherEvent', 'finalEvent']); If you use an emit event not listed in , Vue will throw a warning, similar to using on the Options API. Otherwise, you can then use the function to emit as usual, without needing to use the at all. defineEmits emits emit() Options API Final Thoughts and Best Practices Emit is a powerful tool for sending data back up to the parent when we have to. This means datastreams can be two-way in Vue. When defining code, the two main best practices are: emit Always define your emit events in either or , which will help you keep your code clean and well documented. emits defineEmits Normal convention in Vue 3 is to use kebab case ( ) for HTML, and camel case ( ) in script. As such, it is best to follow this convention here too. this-is-kebab-case thisIsCamelCase I hope you've enjoyed this guide on how works. Stay tuned for more . $emit Vue Content Also Published Here
