vue3里的defineEmits是用来定义事件，避免父子组件形成互相的数据耦合依赖，在大型工程里面降低数据状态的混乱结局。

它有三种定义，我们一般都是直接用最简单的defineEmits(["event1"])写法就完事了，不过它还有两种骚定义方法和使用方法。

第一种方法

export declare function defineEmits<EE extends string = string>
  (emitOptions: EE[]): EmitFn<EE[]>;

这种情况是最简单的，在使用的时候我们只需要在defineEmits的入参里面定义一个字符串的数组即可:

const emits2 = defineEmits(["event1"]);
...
emits2("event1", 'eventValue');

第二种方法

export declare function defineEmits<E extends EmitsOptions = EmitsOptions>
  (emitOptions: E): EmitFn<E>;
...
export type EmitsOptions = ObjectEmitsOptions | string[];
...
export type ObjectEmitsOptions = 
  Record<string, ((...args: any[]) => any) | null>;

从上面这个方法申明来看，我们可以看到defineEmits可以接收一个Record<string, ((...args: any[]) => any) | null>类型作为入参。

const emits = defineEmits({
  event1: (val: string) => {
    return val;
  },
});
...
emits("event1", 'eventValue');

在这种应用方法中，我们实际上是定义了一个函数实例，ts反向根据这个函数进行类型推断，来获取参数和返回值类型。

第三种方法

export declare function defineEmits<T extends 
	((...args: any[]) => any) | Record<string, any[]>>(): 
	
T extends (...args: any[]) => any ? T : ShortEmits<T>;

• 第一种情况

T extends (...args: any[]) => any

在这里泛型T是一个函数，这个函数的入参和出参都是任意类型，那么我们基本可以不看代码就能知道它需要传入俩参数，第一个是定义事件名字，第二个则是事件值：

const emits = defineEmits<(param: "event32", val: string) => string>();
...
emits('event32', 'event32Value')

• 第二种情况

T extends Record<string, any[]>>()

这个情况下泛型T是一个Record<string, any[]>>()类型，key是时间名字，而后面的值就是事件值，使用方法如下：

const emits = defineEmits<{ event31: string[] }>();
...
emits('event', 'eventValue')

备注：看到没，T extends Record<string, any[]>>()，这里面的值是一个数组哦，也就是说我们在实际emit的时候可以返回多个值哦。比如下面的语句：

emits('event31', '事件31', '事件311')

// 接收端
@event31="(v, v2) => console.log(v, v2)"