defineEmit

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

Declare 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

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 errorArgument of type 'string' is not assignable to parameter of type 'number'.
</script>

Volar Configuration

tsconfig.json

jsonc

{
  "vueCompilerOptions": {
    "plugins": ["unplugin-vue-macros/volar"],
    "vueMacros": {
      "defineEmit": true,
    },
  },
}

Contributors

Kevin Deng

zhiyuanzmj

Leo

Changelog

Last edited about 1 month ago

View full history

defineEmit ​

API Reference ​

Basic Usage ​

With Validation ​

TypeScript ​

Volar Configuration ​