Typing emits in Vue - Step-by-Step Execution

Concept Flow - Typing emits

Define component with emits type

↓

Emit event with typed payload

↓

Parent listens to event

↓

Payload type checked

↓

Event handled safely

This flow shows how a Vue component defines typed emits, emits events with payloads, and how the parent listens and type-checks the event payload.

Execution Sample

Vue

const MyButton = defineComponent({
  emits: {
    click: (payload: string) => typeof payload === 'string'
  },
  setup(props, { emit }) {
    emit('click', 'hello')
  }
})

A Vue component defines a typed 'click' event that expects a string payload and emits it.

Execution Table

Step	Action	Emit Event	Payload	Type Check Result	Parent Receives
1	Component setup runs
2	emit('click', 'hello') called	click	'hello'	true
3	Parent listens to 'click'				'hello' received
4	Type check passes			true	Event handled
5	emit('click', 123) called	click	123	false
6	Type check fails			false	Payload received with warning

💡 Typed emits trigger warnings (in development) when payload type does not match, but events are still emitted.

Variable Tracker

Variable	Start	After Step 2	After Step 5	Final
payload	undefined	'hello'	123	123
typeCheck	undefined	true	false	false

Key Moments - 2 Insights

Why does emitting 'click' with a number payload cause a problem?

Because the emits definition expects a string payload, emitting a number fails the type check as shown in execution_table rows 5 and 6.

Does the parent receive the event if the payload type is wrong?

Yes, the parent receives the event, but Vue shows a warning if the payload type does not match, as seen in execution_table row 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the payload at step 2?

A 123

B 'hello'

C undefined

D null

💡 Hint

Check the 'Payload' column at step 2 in the execution_table.

At which step does the type check fail?

A Step 2

B Step 4

C Step 6

D Step 3

💡 Hint

Look at the 'Type Check Result' column in the execution_table.

If you emit('click', 'world') instead of 'hello', what changes in the execution table?

A Payload at step 2 changes to 'world', type check remains true

B Type check fails at step 2

C Parent does not receive event

D No change at all

💡 Hint

Refer to the 'Payload' and 'Type Check Result' columns at step 2.

Concept Snapshot

Typing emits in Vue:
- Define emits with event names and payload types
- Emit events with payloads matching types
- Parent listens and receives typed payloads
- Type mismatches cause warnings in development
- Helps catch errors early and improves code safety

Full Transcript

In Vue, typing emits means defining the events a component can emit along with the expected payload types. When the component emits an event, Vue checks if the payload matches the defined type. If it matches, the parent component receives the event and payload safely. If not, Vue emits a warning in development mode, but the event is still dispatched. This helps prevent bugs by ensuring events carry the right data type. For example, a component can define a 'click' event that expects a string. Emitting 'click' with a string passes the check and the parent gets the string. Emitting with a number fails the check and triggers a warning. This visual trace shows each step: setup, emit call, type check, and parent reception.

Practice

1. What is the main purpose of using defineEmits in a Vue component?

easy

A. To declare which events the component can emit and their payload types

B. To define the component's reactive state variables

C. To register global Vue plugins

D. To import external libraries into the component

Solution

1. Step 1: Understand the role of defineEmits

   defineEmits is used inside <script setup> to specify which events a component can send out.

2. Step 2: Identify what it declares

   It declares event names and their payload types to improve type safety and tooling support.

3. Final Answer:

   To declare which events the component can emit and their payload types -> Option A

4. Quick Check:

   Typing emits = declare events and payloads [OK]

Hint: defineEmits declares events your component can send [OK]

Common Mistakes:

• Confusing defineEmits with state or props
• Thinking it registers plugins
• Using it to import libraries

2. Which of the following is the correct syntax to type an emit event named submit with a payload of type string in Vue 3 <script setup>?

easy

A. const emit = defineEmits(['submit: string'])

B. const emit = defineEmits({ submit: string })

C. const emit = defineEmits('submit', string)

D. const emit = defineEmits<{ submit: (payload: string) => void }>()

Solution

1. Step 1: Recall the correct typing syntax for emits

   Vue 3 uses defineEmits with a TypeScript type object describing event names and their payload function signatures.

2. Step 2: Match the correct syntax

   The correct syntax is defineEmits<{ submit: (payload: string) => void }>() which types the submit event with a string payload.

3. Final Answer:

   const emit = defineEmits<{ submit: (payload: string) => void }>() -> Option D

4. Quick Check:

   Typed emits use object with event function signatures [OK]

Hint: Use defineEmits with typed event function signatures [OK]

Common Mistakes:

• Passing event and type as separate arguments
• Using array with type inside string
• Using object with type directly instead of function signature

3. Given this Vue <script setup> code:

const emit = defineEmits<{ update: (value: number) => void }>();

emit('update', 42);

What will happen if you try to emit update with a string payload like emit('update', 'hello')?

medium

A. Vue will throw a runtime error when emitting

B. TypeScript will show an error because the payload type is incorrect

C. The event will emit successfully with the string payload

D. The event will be ignored silently

Solution

1. Step 1: Understand the typed emit signature

   The update event expects a payload of type number as declared in defineEmits<{ update: (value: number) => void }>().

2. Step 2: Check what happens if payload type mismatches

   Passing a string like 'hello' violates the type signature, so TypeScript will report a compile-time error before running.

3. Final Answer:

   TypeScript will show an error because the payload type is incorrect -> Option B

4. Quick Check:

   Typed emits enforce payload types at compile time [OK]

Hint: Typed emits catch wrong payload types before runtime [OK]

Common Mistakes:

• Thinking Vue throws runtime error instead of TS error
• Assuming event emits anyway without error
• Confusing payload type with event name

4. Identify the error in this Vue <script setup> code snippet:

const emit = defineEmits<{ save: (data: object) => void }>();

emit('save');

medium

A. Missing payload argument when emitting 'save' event

B. Incorrect event name 'save' should be 'Save'

C. defineEmits should not use type annotations

D. emit function is not defined

Solution

1. Step 1: Check the typed emit signature

   The save event expects a payload argument of type object.

2. Step 2: Analyze the emit call

   The call emit('save') is missing the required payload argument, causing a type error.

3. Final Answer:

   Missing payload argument when emitting 'save' event -> Option A

4. Quick Check:

   Typed emits require payloads as declared [OK]

Hint: Emit calls must include all typed payload arguments [OK]

Common Mistakes:

• Omitting required payload argument
• Using wrong event name casing
• Thinking type annotations are invalid here

5. You want to type a Vue component emit that can send either a string or number payload with the event name change. Which is the correct way to type this using defineEmits?

hard

A. const emit = defineEmits<{ change: (value: string & number) => void }>()

B. const emit = defineEmits<{ change: (value: string) => void; change: (value: number) => void }>()

C. const emit = defineEmits<{ change: (value: string | number) => void }>()

D. const emit = defineEmits<{ change: (value: any) => void }>()

Solution

1. Step 1: Understand union types for payloads

   To allow multiple types for a payload, use a union type with |, e.g., string | number.

2. Step 2: Check the options for correct union usage

   const emit = defineEmits<{ change: (value: string | number) => void }>() correctly types the change event with a payload that can be either string or number.

3. Step 3: Identify incorrect options

   const emit = defineEmits<{ change: (value: string) => void; change: (value: number) => void }>() repeats the same event name twice, which is invalid. const emit = defineEmits<{ change: (value: string & number) => void }>() uses intersection & which means both types simultaneously (impossible). const emit = defineEmits<{ change: (value: any) => void }>() uses any which loses type safety.

4. Final Answer:

   const emit = defineEmits<{ change: (value: string | number) => void }>() -> Option C

5. Quick Check:

   Use union types for multiple payload types [OK]

Hint: Use | to combine payload types in defineEmits [OK]

Common Mistakes:

• Repeating event names in type object
• Using & instead of | for union types
• Using any which disables type safety