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.