Skip to content

defineEmit

Stability: experimental ⚠️ Experimental feature, use at your risk

Declare single emit one by one using defineEmit.

FeaturesSupported
Vue 3
Nuxt 3
Vue 2
TypeScript
Volar Plugin

WARNING

defineEmit can not be used with defineEmits at same time

API Reference

ts
defineEmit<T>(emitName)
defineEmit<T>(emitName, validator)

// emitName parameter can be optional,
// and will be inferred from variable name
const emitName = defineEmit<T>()

Basic Usage

vue
<script setup>
// Declare emit
const 
increment
=
defineEmit
('increment')
// Infer emit name from variable name const
change
=
defineEmit
()
// emit event
increment
()
</script>

With Validation

vue
<script setup>
// Declare event with validation
const 
increment
=
defineEmit
('increment', (
value
) =>
value
< 20)
</script>

TypeScript

vue
<script setup lang="ts">
const 
increment
=
defineEmit
('increment', (
value
: number) =>
value
< 20)
const
decrement
=
defineEmit
<[
value
: number]>()
increment
(2) // pass
increment
('2') // TS type error
Argument of type 'string' is not assignable to parameter of type 'number'.
</script>

Volar Configuration

jsonc
// tsconfig.json
{
  "vueCompilerOptions": {
    "target": 3, // or 2.7 for Vue 2
    "plugins": [
      "@vue-macros/volar/define-emit",
      // ...more feature
    ],
  },
}

Contributors

The avatar of contributor named as renovate[bot] renovate[bot]

Changelog