Vue Composition API: Emitting Custom Events

Class Component

import { Emit } from "vue-property-decorator";

    @Emit("decremented")
    decrement(): number {
        this.count--;
        return this.count;
    }

    @Emit()
    private onClose(): void {
        return;
    }

Composition API

const emit = defineEmits<{
    (e: "decremented", newValue: number): void;
    (e: "on-close"): void;
}>();

function decrement(): void {
    count.value--;
    emit("decremented", count.value);
}

function onClose(): void {
    emit("on-close");
}

Notes

• When an event name is not supplied to the Emit() decorator, it defaults to using the name of the function converted to kebab case. If you accidentally emit an event in camel case, e.g. emit("onClose"), it will not match an @on-close handler on a parent component (in Vue 2), so be sure to use kebab case during conversions.

Documentation

• <script setup>
  • defineProps() & defineEmits()
  • TypeScript-only Features