Component Events

<script setup>
const emit = defineEmits(['change', 'update'])

emit('change')
emit('update', 1)
</script>

<script setup>
const emit = defineEmits({
  change: null,
  update: (value: number) => {
    // Validation logic
    return value >= 0
  }
})

emit('change')
emit('update', 1)
</script>

export default {
  emits: ['change', 'update'],
  setup(props, { emit }) {
    emit('change')
    emit('update', 1)
  }
}

<script setup lang="ts">
// Record syntax
const emit = defineEmits<{
  change: []  // no arguments
  update: [value: number]  // named tuple syntax
  delete: [id: string, confirmed: boolean]
}>()

emit('change')
emit('update', 1)
emit('delete', 'id-123', true)
</script>

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change'): void
  (e: 'update', value: number): void
}>()
</script>

<template>
  <MyComponent 
    @change="handleChange"
    @update="handleUpdate"
  />
</template>

<script setup>
function handleChange() {
  console.log('changed')
}

function handleUpdate(value) {
  console.log('updated:', value)
}
</script>

<template>
  <MyComponent 
    @change="count++"
    @update="(value) => handleUpdate(value)"
  />
</template>

export type ObjectEmitsOptions = Record<
  string,
  ((...args: any[]) => any) | null
>

<script setup>
const emit = defineEmits({
  // No validation
  change: null,
  
  // Validation function
  update: (value: number) => {
    if (value < 0) {
      console.warn('update event payload must be non-negative')
      return false
    }
    return true
  },
  
  // Complex validation
  submit: (payload: { name: string; email: string }) => {
    if (!payload.name || !payload.email) {
      console.warn('submit requires name and email')
      return false
    }
    return true
  }
})
</script>

emit('myEvent')

<MyComponent @my-event="handler" />

// ✅ Good
emit('close')
emit('submit')
emit('item-selected')

// ❌ Avoid
emit('click')  // too generic
emit('data')   // unclear action

export type EmitFn<
  Options = ObjectEmitsOptions,
  Event extends keyof Options = keyof Options,
> =
  Options extends Array<infer V>
    ? (event: V, ...args: any[]) => void
    : {} extends Options
      ? (event: string, ...args: any[]) => void
      : UnionToIntersection<
          {
            [key in Event]: Options[key] extends (...args: infer Args) => any
              ? (event: key, ...args: Args) => void
              : Options[key] extends any[]
                ? (event: key, ...args: Options[key]) => void
                : (event: key, ...args: any[]) => void
          }[Event]
        >

export type EmitsToProps<T extends EmitsOptions> =
  T extends string[]
    ? {
        [K in `on${Capitalize<T[number]>}`]?: (...args: any[]) => any
      }
    : T extends ObjectEmitsOptions
      ? {
          [K in string & keyof T as `on${Capitalize<K>}`]?: (
            ...args: T[K] extends (...args: infer P) => any
              ? P
              : T[K] extends null
                ? any[]
                : never
          ) => any
        }
      : {}

<!-- Parent.vue -->
<div @custom-event="handler">
  <!-- This won't trigger handler -->
  <Child />
</div>

<!-- Parent.vue -->
<Child @custom-event="$emit('custom-event')" />

<Child v-on="$attrs" />

<!-- Child.vue -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

function updateValue(value) {
  emit('update:modelValue', value)
}
</script>

<template>
  <input 
    :value="modelValue"
    @input="updateValue($event.target.value)"
  />
</template>

<!-- Parent.vue -->
<template>
  <Child v-model="text" />
</template>

<!-- Child.vue -->
<script setup>
defineEmits(['update:title', 'update:content'])
</script>

<!-- Parent.vue -->
<template>
  <Child 
    v-model:title="title"
    v-model:content="content"
  />
</template>

export function emit(
  instance: ComponentInternalInstance,
  event: string,
  ...rawArgs: any[]
): ComponentPublicInstance | null | undefined {
  if (instance.isUnmounted) return
  const props = instance.vnode.props || EMPTY_OBJ
  
  // Emit validation in development
  if (__DEV__) {
    const { emitsOptions } = instance
    if (emitsOptions) {
      if (!(event in emitsOptions)) {
        warn(
          `Component emitted event "${event}" but it is neither declared in ` +
          `the emits option nor as an "on${capitalize(camelize(event))}" prop.`
        )
      } else {
        const validator = emitsOptions[event]
        if (isFunction(validator)) {
          const isValid = validator(...rawArgs)
          if (!isValid) {
            warn(
              `Invalid event arguments: event validation failed for event "${event}".`
            )
          }
        }
      }
    }
  }
  
  // ... handler invocation logic
}

interface UpdateEvent {
  id: string
  value: number
  timestamp: Date
}

const emit = defineEmits<{
  update: [event: UpdateEvent]
}>()

emit('update', {
  id: 'item-1',
  value: 42,
  timestamp: new Date()
})

<script setup>
const emit = defineEmits(['save', 'cancel'])

function handleSave(data) {
  // Pre-processing
  const processedData = transform(data)
  emit('save', processedData)
}

function handleCancel() {
  // Cleanup logic
  cleanup()
  emit('cancel')
}
</script>

<script setup>
const emit = defineEmits(['success', 'error'])

async function submit(data) {
  try {
    const result = await api.submit(data)
    emit('success', result)
  } catch (error) {
    emit('error', error)
  }
}
</script>

<script setup>
const emit = defineEmits<{
  confirm: []
  cancel: []
}>()
</script>

<template>
  <div class="dialog">
    <button @click="emit('confirm')">Confirm</button>
    <button @click="emit('cancel')">Cancel</button>
  </div>
</template>

<script setup>
interface FormData {
  name: string
  email: string
}

const emit = defineEmits<{
  submit: [data: FormData]
  reset: []
  error: [message: string]
}>()
</script>

<script setup>
const emit = defineEmits<{
  loading: [isLoading: boolean]
  success: [data: any]
  error: [error: Error]
}>()

async function load() {
  emit('loading', true)
  try {
    const data = await fetchData()
    emit('success', data)
  } catch (error) {
    emit('error', error)
  } finally {
    emit('loading', false)
  }
}
</script>