在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 = []
})