pageClass | sidebarDepth | title | description |
---|---|---|---|
rule-details |
0 |
vue/require-explicit-emits |
require `emits` option with name triggered by `$emit()` |
require
emits
option with name triggered by$emit()
This rule reports event triggers not declared with the emits
option. (The emits
option is a new in Vue.js 3.0.0+)
Explicit emits
declaration serves as self-documenting code. This can be useful for other developers to instantly understand what events the component is supposed to emit.
Also, with attribute fallthrough changes in Vue.js 3.0.0+, v-on
listeners on components will fallthrough as native listeners by default. Declare it as a component-only event in emits
to avoid unnecessary registration of native listeners.
<template>
<!-- ✓ GOOD -->
<div @click="$emit('good')"/>
<!-- ✗ BAD -->
<div @click="$emit('bad')"/>
</template>
<script>
export default {
emits: ['good']
}
</script>
<script>
export default {
emits: ['good'],
methods: {
foo () {
// ✓ GOOD
this.$emit('good')
// ✗ BAD
this.$emit('bad')
}
}
}
</script>
<script>
export default {
emits: ['good'],
setup (props, context) {
// ✓ GOOD
context.emit('good')
// ✗ BAD
context.emit('bad')
}
}
</script>
Nothing.