Impossible to override native events

[sirxemic]

Hello!

It seems like it's impossible to override native events. Simple example:

/* Foo.vue */
<template>
  <div />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  emits: {
    foobar: (a: string) => true,
    click: (a: string) => true,
    submit: (a: string) => true,
    load: (a: string) => true
  }
})
</script>

and another component using Foo.vue:

<template>
  <Foo
    @foobar="handler"
    @click="handler"
    @submit="handler"
    @load="handler"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Foo from './Foo.vue'

export default defineComponent({
  components: {
    Foo
  },

  methods: {
    handler (k: string) {
      console.log(k)
    }
  }
})
</script>

Volar incorrectly gives the error Type '(k: string) => void is not assignable to type '(payload: Event) => void'. for all event bindings, except foobar, the non-native one.

I don't think this is desirable behaviour. Vue works exactly how I expect it to work, but Volar does not.

[johnsoncodehk]

Try this:

import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    onClick: Function as PropType<(a: string) => void>,
    ...
  },
})

See: #41 (comment)

[sirxemic]

Hmm yes that works, but still, shouldn't we be able to just define the emits and make it work out of the box? I feel like what you're suggesting is a workaround. Am I wrong for thinking this is a bug? If so, why?

[johnsoncodehk]

Vue document does not clearly point out events priority from props and emits, so now only allow override native events with same props to avoid confusion. It may change in the future.

[sirxemic]

The documentation literally states:

When a native event (e.g., click) is defined in the emits option, the component event will be used instead of a native event listener.

So given that, I think it's clear that Volar should use the component event instead of the native event in these cases.

[johnsoncodehk]

Thanks to point this out!

[johnsoncodehk]

Fixed in 0.22.24.

[sirxemic]

That was quick, thank you!

[MortalDo]

v0.32.1
when I use ant-design-vue
<a-menu @click="onClick">
volar: Type 'MenuClickEventHandler' is not assignable to type '(payload: MouseEvent) => void'.
Types of parameters 'info' and 'payload' are incompatible.

It looks like a similar problem

[MortalDo]

v0.32.1 still get this:
Type '(e: Number) => void' is not assignable to type '(payload: MouseEvent) => void'.
Types of parameters 'e' and 'payload' are incompatible.