Require emits option with name triggered by `$emit()`JS-0688

Prefer Vue 3.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.

Bad Practice

<template>
  <!-- good is declared -->
  <div @click="$emit('good')"/>

  <!-- bad is not declared -->
  <div @click="$emit('bad')"/>
</template>

<script>
export default {
  emits: ['good']
}
</script>

<script>
export default {
  emits: ['good'],
  methods: {
    foo () {
      // good is declared
      this.$emit('good')
      // bad is not declared
      this.$emit('bad')
    }
  }
}
</script>

<script>
export default {
  emits: ['good'],
  setup (props, context) {
    // ✓ good is declared
    context.emit('good')
    // ✗ bad is not declared
    context.emit('bad')
  }
}
</script>

Recommended

<template>
  <!-- ✓ GOOD -->
  <div @click="$emit('good')"/>
</template>
<script>
export default {
  emits: ['good']
}
</script>


<script>
export default {
  emits: ['good'],
  methods: {
    foo () {
      this.$emit('good')
    }
  }
}
</script>

<script>
export default {
  emits: ['good'],
  setup (props, context) {
    // ✓ GOOD
    context.emit('good')
  }
}
</script>