defineEmit 
Stability:
experimental ⚠️ Experimental feature, use at your riskDeclare single emit one by one using defineEmit.
| Features | Supported |
|---|---|
| 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</script>Volar Configuration
jsonc
// tsconfig.json
{
"vueCompilerOptions": {
"target": 3, // or 2.7 for Vue 2
"plugins": [
"@vue-macros/volar/define-emit",
// ...more feature
],
},
}Contributors
Kevin Deng