DEV Community

Cover image for How to use Custom events in Vue 3
Miracleio
Miracleio

Posted on • Originally published at miracleio.me

How to use Custom events in Vue 3

As someone who has been using Vue 2 for a while now, switching over to Vue 3 with its new composition API and other cool features is exciting but comes with its little hiccups.

One of the hiccups or issues I faced while writing Vue 3 applications was using custom events in the new Composition API instead of the good Ol' Options API.

I tried checking out the Vue docs, but I wasn't getting exactly what I wanted. Then I set out on a googling spree, desperate to find a way to use custom events with the Composition API in my project.

And I finally found the way(s) πŸ˜‹.

So here, I'll discuss how to emit custom events from our components using the Composition API.

Define Custom events inline

Before I dive right into how to use Custom events with the Composition API in Vue 3, here's how we normally use custom events inline. To emit custom events inline, maybe in an input field or button, we can define events using the v-on or @ directive:

<button @click="$emit('btn-click')">Click me</button>
Enter fullscreen mode Exit fullscreen mode

Then, in our parent component, we can listen for the event like so:

<child @btn-click="doSomething()" />
Enter fullscreen mode Exit fullscreen mode

Custom events using the Options API

With the Options API to emit custom events we also use the $emit method. We can access this method within our <script> with this. We'll set up the event emit from the doSomething method of the component.

<script>
export default {
    // define your emits via the emits option
    emits: ['btn-click'],
    ...
    methods: {
        doSomething(){
          this.$emit('btn-click')  
        },
    }

};
</script>
Enter fullscreen mode Exit fullscreen mode

We still listen to this event from the parent component the same way we did when the emit was defined inline previously.

Custom events using Composition API

Unlike the Options API, the setup Component option is executed before the component is created, so we basically do not have to this.

The setup function accepts two arguments: props and context. We can access the component emit method from context.

We can create a function where we call the emit method and run the function when the button is clicked.

<script>
export default {
    // define your emits via the emits option
    emits: ['btn-click'],

    ...
    setup(props, context){
        const doSomething = () => {
            context.emit('btn-click')
        }
    },
};
</script>
Enter fullscreen mode Exit fullscreen mode

OR, using destructuring,

...

// here we're getting the emit method by destructuring the context argument
setup(props, { emit }){
    const doSomething = () => {
        emit('btn-click')
    }
}

...
Enter fullscreen mode Exit fullscreen mode

And there you have it! That's how we can use custom events in the Composition API.

Thanks for reading πŸ’–. Let me know if you have any questions or suggestions ✨

Top comments (0)