Emitting custom events in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of emitting custom events in Vue?

Emitting custom events allows a child component to send messages or data to its parent component, enabling communication from child to parent.

beginner

How do you emit a custom event named 'update' with a value in Vue's Composition API?

Use the emit function like this: emit('update', value) inside the <script setup> block.

beginner

In Vue, how does the parent component listen to a custom event called 'submit'?

The parent listens by adding an event listener in the template: <ChildComponent @submit="handleSubmit" /> where handleSubmit is a method in the parent.

intermediate

What is the role of the defineEmits function in Vue 3's <script setup>?

defineEmits declares which custom events a component can emit, helping with type checking and clearer code.

intermediate

Why should you avoid using $emit outside of Vue component setup or options?

Because $emit is tied to Vue component instances, using it outside can cause errors or unexpected behavior since there is no component context.

Which Vue directive is used in a parent component to listen to a child's custom event?

A Both B and C

B v-on:eventName

C @eventName

D v-bind:eventName

Both @eventName and v-on:eventName are valid ways to listen to events in Vue.

In Vue 3's <script setup>, how do you declare the events your component can emit?

A Using <code>defineProps</code>

B Using <code>defineEmits</code>

C Using <code>this.$emit</code>

D Using <code>emitEvents</code>

defineEmits is the correct function to declare emitted events.

What is the correct way to emit a custom event named 'close' with no data in Vue's Composition API?

A emit('close')

B emit.close()

C $emit('close')

D this.emit('close')

You call the emit function with the event name as a string.

Why is emitting custom events useful in Vue?

A To fetch data from APIs

B To style components dynamically

C To register global components

D To allow child components to communicate with parents

Custom events let child components send messages or data to their parent components.

Which of these is NOT a valid way to listen to a custom event in Vue?

A <Child @save="onSave" />

B <Child v-on:save="onSave" />

C <Child v-bind:save="onSave" />

D <Child @save.prevent="onSave" />

v-bind is for binding props, not events.

Explain how a child component emits a custom event and how the parent listens to it in Vue.

Think about how you tell your friend something and how they listen.

Describe the purpose and usage of the defineEmits function in Vue 3's