How to `emit` event out of `setup` method in vue3?

Question

I know I can call the emit method from the setup method, but is there any way to emit event from any other functions without passing the emit method from setup method(not the the functions in the methods option, but a useXXX function) ?

Solution 1

You can use getCurrentInstance from Vue. You can check it out in the docs.

Usage is like

function useFunctionThatEmitsSomething(){
  const instance = getCurrentInstance();

  // do something
  instance.emit('event');
}

Edit: Even though this answer solves the author's problem, as per the linked docs, this method is intended only for ADVANCED use cases, e.g authoring a plugin or library. For common use cases, like building a simple SPA, using this is TOTALLY DISCOURAGED and should be avoided at all costs, since it can lead to unreadable and unmaintenable code. If you feel the need to use this in a case like that, you're probably doing something wrong.

Solution 2

setup function takes two arguments, First one is props. And the second one is context which exposes three component properties, attrs, slots and emit.

You can access emit from context like:

export default {
    setup(props, context) {
        context.emit('event');
    },
};

or

export default {
    setup(props, { emit }) {
        emit('event');
    },
};

Source

Solution 3

Here's the proper way to emit events programmatically (using javascript) in vue3:

export default defineComponent({
  // See: https://v3.vuejs.org/guide/migration/emits-option.html#overview
  emits: 'myEventName', // <--- don't forget to declare custom events emitted
  setup(_, { emit }) {

    emit('myEventName') // <--- emit custom event programmatically whenever we want

  },
})

The emits function can just as easily be passed as a param to any function not declared inside setup.

---

Side-note regarding other answers: we should avoid using getCurrentInstance(), which was intended for library authors needing access to internals of vue components (a.k.a. this of vue v2), when there are better alternatives. Especially when those alternatives were designed explicitly for our use case.

Solution 4

in vue3 typescript setup

<script setup lang="ts">
const emit = defineEmits()
emit('type', 'data')
<script>

Solution 5

With Vue 3 setup syntax sugar

<script setup lang="ts">
import { defineEmits } from 'vue'

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

function yourFunction (id: number) {
  emit('change', id)
}
<script>

See docs: https://v3.vuejs.org/api/sfc-script-setup.html#typescript-only-features

View more solutions

Comments

[RomkaLTU]

Why need to declare emits: 'specialClick'?

[Froxz]

Hi @RomkaLTU emits are like props now in Vue 3: v3.vuejs.org/guide/migration/emits-option.html#_3-x-behavior

[Jeff Bowman]

From the linked docs: "Usage of getCurrentInstance is strongly discouraged in application code. Do NOT use it as an escape hatch to get the equivalent of this in Composition API."

[Diego Fidalgo]

I know that... But the author of the question asked SPECIFICALLY for this...

[Jeff Bowman]

Yes, and I thought it would be helpful for future readers for them to see the warning message you omitted. If you'd like, I can edit it into the answer instead, but either way I think it would be more responsible to have the warning visible. Speaking for myself, I found this question via searching and didn't have the same constraints the asker did, so I was a bit surprised that your accepted/pinned answer recommended something that the docs so loudly discouraged.

[Diego Fidalgo]

Edited the answer. Now I think it's clear enough

[Vahid Amiri]

This is the way to go.