import { isArray, isOn, hasOwn, EMPTY_OBJ, capitalize, hyphenate, isFunction, extend } from '@vue/shared' import { ComponentInternalInstance, ComponentOptions, ConcreteComponent } from './component' import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling' import { warn } from './warning' import { UnionToIntersection } from './helpers/typeUtils' import { devtoolsComponentEmit } from './devtools' import { AppContext } from './apiCreateApp' export type ObjectEmitsOptions = Record< string, ((...args: any[]) => any) | null > export type EmitsOptions = ObjectEmitsOptions | string[] export type EmitFn< Options = ObjectEmitsOptions, Event extends keyof Options = keyof Options > = Options extends Array ? (event: V, ...args: any[]) => void : {} extends Options // if the emit is empty object (usually the default value for emit) should be converted to function ? (event: string, ...args: any[]) => void : UnionToIntersection< { [key in Event]: Options[key] extends ((...args: infer Args) => any) ? (event: key, ...args: Args) => void : (event: key, ...args: any[]) => void }[Event] > export function emit( instance: ComponentInternalInstance, event: string, ...args: any[] ) { const props = instance.vnode.props || EMPTY_OBJ if (__DEV__) { const { emitsOptions, propsOptions: [propsOptions] } = instance if (emitsOptions) { if (!(event in emitsOptions)) { if (!propsOptions || !(`on` + capitalize(event) in propsOptions)) { warn( `Component emitted event "${event}" but it is neither declared in ` + `the emits option nor as an "on${capitalize(event)}" prop.` ) } } else { const validator = emitsOptions[event] if (isFunction(validator)) { const isValid = validator(...args) if (!isValid) { warn( `Invalid event arguments: event validation failed for event "${event}".` ) } } } } } if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) { devtoolsComponentEmit(instance, event, args) } let handlerName = `on${capitalize(event)}` let handler = props[handlerName] // for v-model update:xxx events, also trigger kebab-case equivalent // for props passed via kebab-case if (!handler && event.startsWith('update:')) { handlerName = `on${capitalize(hyphenate(event))}` handler = props[handlerName] } if (!handler) { handler = props[handlerName + `Once`] if (!instance.emitted) { ;(instance.emitted = {} as Record)[handlerName] = true } else if (instance.emitted[handlerName]) { return } } if (handler) { callWithAsyncErrorHandling( handler, instance, ErrorCodes.COMPONENT_EVENT_HANDLER, args ) } } export function normalizeEmitsOptions( comp: ConcreteComponent, appContext: AppContext, asMixin = false ): ObjectEmitsOptions | null { if (!appContext.deopt && comp.__emits !== undefined) { return comp.__emits } const raw = comp.emits let normalized: ObjectEmitsOptions = {} // apply mixin/extends props let hasExtends = false if (__FEATURE_OPTIONS_API__ && !isFunction(comp)) { const extendEmits = (raw: ComponentOptions) => { hasExtends = true extend(normalized, normalizeEmitsOptions(raw, appContext, true)) } if (!asMixin && appContext.mixins.length) { appContext.mixins.forEach(extendEmits) } if (comp.extends) { extendEmits(comp.extends) } if (comp.mixins) { comp.mixins.forEach(extendEmits) } } if (!raw && !hasExtends) { return (comp.__emits = null) } if (isArray(raw)) { raw.forEach(key => (normalized[key] = null)) } else { extend(normalized, raw) } return (comp.__emits = normalized) } // Check if an incoming prop key is a declared emit event listener. // e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are // both considered matched listeners. export function isEmitListener( options: ObjectEmitsOptions | null, key: string ): boolean { if (!options || !isOn(key)) { return false } key = key.replace(/Once$/, '') return ( hasOwn(options, key[2].toLowerCase() + key.slice(3)) || hasOwn(options, key.slice(2)) ) }