当前位置: 首页 > 工具软件 > Overload > 使用案例 >

No overload matches this call. Overload 1 of 2, ‘(type: “*“, handler: WildcardHandler<Record<EventTy

焦同
2023-12-01

在Vue3.x中没有了on和off,所以在vue3中下载mitt来进行实现全局事件的发布和订阅与取消订阅(也就是跨组件通讯)。
有以下几个属性使用:

1.all(Map对象):包含了所有订阅的事件名称,及对应的处理方法数组。
2.emit(方法):触发事件,参数为(事件名(方法名),携带的参数),当- 前携带的参数只能为一个,不能为多个。
3.on(方法):创建事件订阅,参数为(事件名,处理方法)。
4.off(方法):取消事件订阅,参数为(事件名,处理方法)。

报错信息如下:

ERROR in src/components/ValidateForm.vue:30:5
TS2769: No overload matches this call.       
  Overload 1 of 2, '(type: "*", handler: WildcardHandler<Record<string | symbol, unknown>>): void', gave the following error.
    Argument of type '"form-item-created"' is not assignable to parameter of type '"*"'.
  Overload 2 of 2, '(type: "form-item-created", handler: Handler<unknown>): void', gave the following error.
    Argument of type '(func?: ValidateFunc | undefined) => void' is not assignable to parameter of type 'Handler<unknown>'.
      Types of parameters 'func' and 'event' are incompatible.
        Type 'unknown' is not assignable to type 'ValidateFunc | undefined'.
          Type 'unknown' is not assignable to type 'ValidateFunc'.
    28 |       }
    29 |     }
  > 30 |     emitter.on('form-item-created', callback)
       |     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    31 |     onUnmounted(() => {
    32 |       emitter.off('form-item-created', callback)
    33 |       funcArr = []

这是由于mitt的版本问题,
第一种方式:安装2.1.0版本即可
这里如果原来有的,下载之后如果还报错,那么先看package-lock.json中mitt版本是否改过来了,然后把node_modules右键删除,重新输入指令npm install,即可

npm install --save mitt@2.1.0
//使用
import mitt from 'mitt'
type ValidateFunc = () => boolean
export const emitter = mitt<'form-item-created', ValidateFunc>()
emitter.on('form-item-created', callback)
onUnmounted(() => {
      emitter.off('form-item-created', callback)
    })

第二种方式,在最新版本当中需要定义其类型,解决如下即可

//在setup上添加如下代码
import mitt from 'mitt'
type ValidateFunc = () => boolean
type Emits<EventType extends string | symbol, T> = {
  on(type: EventType, handler: (arg: T) => void): void
  off(type: EventType, handler: (arg: T) => void): void
  emit(type: EventType, arg: T): void
}
type Emitter = Emits<'form-item-created', ValidateFunc>
export const emitter:Emitter = mitt()
//在setup使用方式
emitter.on('form-item-created', callback)
    onUnmounted(() => {
      emitter.off('form-item-created', callback)
      funcArr = []
    })
 类似资料: