Script Setup Emit

Posted on  by admin

Vue $emit lets us emit, or send, custom events from a child component to its parent. In a standard Vue flow, this is the best way to trigger certain events (like closing a popup, for example) or to send data from a child component (like making a custom input).

🔗Other Features

This article focuses in detail on Vue $emit, click here for a broader guide on handling Vue events.

Each Vue $emit call can pass two arguments:. The event name – this is the name that we can listen to in our parent component. A payload object – data that we want to pass with the event; this is optional. Here’s an example of a typical emit using both parameters $emit('event-name', data).

There are a bunch of different ways to use Vue $emit in your code, the three that I’ll be covering in this article are….

Inline using $emit.

Pro Tips for emitting custom events

Options API – this.$emit. Composition API – context.emit. Each of them has its own pros/cons depending on your case, so let’s just check out an example in each and you can see which works for you.

An example of where you might want to send data out of a component is when building your own custom form input – let’s imagine a custom text input.

Use kebab-case when listening to events

Since, we’re wrapping our text input, when we implement MyInput.vue, we won’t be able to listen to the standard input events like @change.

🔗Defining Components

Let’s say that our parent component is set up like this, listening for a custom custom-change event and logging its value. To achieve this, we need our custom text input to listen for the native input events, and then emit its own event.

To actually pass the value of our original change event, we need to send our custom event with the event payload – in this case, the event.target.value – as a second parameter.

Defining your custom events using emits

Now if we type in our custom input, our parent component will be properly logging all of our changes.

Migrate a component

Now, let’s move on to emitting events from our script section.

Like almost everything in Vue 3, we have the choice of using the Options API or the Composition API to emit custom events from our component. In the Options API, the $emit method can be called using this.

So in our same MyInput example, let’s say that instead of calling $emit in our template, we call a Vue method first instead. Then, inside our method, we can call this.$emit and same as last time, pass it our event.target.value.

In the Composition API, since setup runs before our component is created, we have no access to this. Instead, we can access our emit method by using the second argument of our setup function – context.

context has access to your components slots, attributes, and most importantly for us, its emit method.

Emitting Events in the Options API with this.$emit

Once we have access to emit whether we:. make setup take the whole context object OR. get only emit by destructuring context.

Closed by default and defineExpose

We can just call emit the same exact as the Options API: create a method, call emit, and pass it our arguments!

  • And there you have it!

  • You now know THREE different ways to emit custom events in Vue.

  • In Vue 3, we can actually define custom events for a component using the emits option in our export default.

This is important for keeping good documentation and knowing exactly what each component does.

MyInput.vue

Also, defining events in emit makes component events take priority over the native events.For example, if we define an event called change, we can override the default action.

  • The Official Vue docs recommend using kebab-case for your event names, even in your script.

  • This is essential if you’re using Vue 2. In Vue 2, event names do not have automatic camelCase to kebab-case conversion and the v-on directive automatically converts your event names to lower case so camelCase named events impossible to listen to.

  • For example, if we emitted an event called myEvent, listening for my-event would not work.

App.vue

In Vue 3, event names – like props and components – can automatically be converted between the different cases.

🔗Additional Features

Similar to props, it is still best to stick to each programming language’s conventions and use camelCase in your script and kebab-case in your template.

The ability to emit custom events in Vue is one of the most important techniques to understand before working on larger Vue projects.

By having this direct line of communication between a child and its parent component, we can do things like:.

Override native events. Build wrappers for event heavy elements (like inputs).

It's this easy to make an async setup()

Pass data everywhere in our application. I hope this overview of Vue $emit helped explain the different ways to use this powerful feature in all sorts of Vue apps.

Modified1 month ago.

🔗