Emitting custom events in Vue - Mini Project: Build & Apply

Emitting Custom Events in Vue

📖 Scenario: You are building a simple Vue app where a child component sends a message to its parent when a button is clicked.

🎯 Goal: Create a child component that emits a custom event with a message. The parent component listens to this event and displays the message.

📋 What You'll Learn

Create a child component named MessageButton with a button.

Add a string variable message in the child component with the value 'Hello from child!'.

Emit a custom event named send-message with the message when the button is clicked.

In the parent component, listen for the send-message event and display the received message.

💡 Why This Matters

🌍 Real World

Custom events let components talk to each other in Vue apps, like a child telling a parent when something happens.

💼 Career

Understanding event emission is key for building interactive Vue applications and collaborating in teams.

1

Create the child component with a message

Create a Vue component named MessageButton using <script setup>. Inside it, define a constant string variable called message with the value 'Hello from child!'. Also add a button element with the text Send Message inside the template.

Vue

  Send Message



// Define message variable here

Hint

Use const message = 'Hello from child!' inside the <script setup> block.

2

Add event emission on button click

In the MessageButton component, import defineEmits from Vue. Create an emitter named emit using defineEmits(['send-message']). Add a click event listener to the button that calls emit('send-message', message).

Vue

  Send Message



const message = 'Hello from child!'
// Import defineEmits and create emit here

Hint

Use defineEmits(['send-message']) and add @click on the button to emit the event.

3

Create the parent component and listen for the event

Create a parent Vue component using <script setup>. Import the MessageButton component. Define a reactive variable receivedMessage initialized as an empty string. In the template, include <MessageButton /> and listen for the send-message event with a handler that sets receivedMessage to the event payload. Below the button, display receivedMessage inside a paragraph.

Vue

  
  {{ receivedMessage }}



// Import MessageButton
// Define receivedMessage
// Define handleMessage function

Hint

Use ref('') for receivedMessage and define a function handleMessage to update it.

4

Complete the app by exporting the parent component

Ensure the parent component exports correctly and includes the MessageButton component in its components list if needed. Confirm the template and script setup are properly closed.

Vue

  
  {{ receivedMessage }}



import { ref } from 'vue'
import MessageButton from './MessageButton.vue'

const receivedMessage = ref('')
function handleMessage(msg) {
  receivedMessage.value = msg
}
// Finalize component export if needed

Hint

Make sure the component code is complete and properly structured.

Practice

1. What does the $emit method do in a Vue child component?

easy

A. It registers a new component globally.

B. It updates the child component's data directly.

C. It changes the route in a Vue Router setup.

D. It sends a custom event to the parent component.

Solution

1. Step 1: Understand the role of $emit

   The $emit method is used inside a child component to send a message or event to its parent.

2. Step 2: Identify the effect of $emit

   It triggers a custom event that the parent can listen to and respond accordingly.

3. Final Answer:

   It sends a custom event to the parent component. -> Option D

4. Quick Check:

   $emit sends events to parent [OK]

Hint: Remember: child uses $emit to talk to parent [OK]

Common Mistakes:

• Thinking $emit changes child data directly
• Confusing $emit with global component registration
• Assuming $emit changes routes

2. Which of the following is the correct syntax to emit a custom event named update with a payload 42 inside a Vue component?

easy

A. this.$emit('update', 42)

B. emit.$('update', 42)

C. $emit('update', 42)

D. this.emit('update', 42)

Solution

1. Step 1: Recall Vue event emission syntax

   In Vue, to emit an event from a component, you use this.$emit(eventName, payload).

2. Step 2: Match the correct syntax

   this.$emit('update', 42) correctly uses this.$emit('update', 42), which is the proper method call.

3. Final Answer:

   this.$emit('update', 42) -> Option A

4. Quick Check:

   Use this.$emit to emit events [OK]

Hint: Always use this.$emit to send events in Vue [OK]

Common Mistakes:

• Omitting 'this' before $emit
• Using incorrect method names like emit or emit.$
• Calling $emit without this context

3. Given this child component code:

export default {
  methods: {
    sendAlert() {
      this.$emit('alert', 'Hello!')
    }
  }
}

And the parent template:

<ChildComponent @alert="showMessage" />

What happens when sendAlert() is called?

medium

A. The parent method showMessage is called with 'Hello!' as argument.

B. Nothing happens because the event name is incorrect.

C. An error occurs because $emit cannot send strings.

D. The child component updates its own data with 'Hello!'.

Solution

1. Step 1: Understand event emission and listening

   The child emits an event named 'alert' with the string 'Hello!'. The parent listens for 'alert' and calls showMessage.

2. Step 2: Trace the event flow

   When sendAlert() runs, the parent receives the event and calls showMessage('Hello!').

3. Final Answer:

   The parent method showMessage is called with 'Hello!' as argument. -> Option A

4. Quick Check:

   Child emits event, parent listens and reacts [OK]

Hint: Child emits event, parent listens with @event [OK]

Common Mistakes:

• Thinking event names must be different in child and parent
• Believing $emit cannot send string data
• Assuming child updates itself on emit

4. Identify the error in this Vue child component method:

methods: {
  notify() {
    $emit('notify')
  }
}

medium

A. Event name 'notify' is reserved and cannot be used.

B. Missing this before $emit causes a ReferenceError.

C. The method should return a value after emitting.

D. The methods object cannot contain functions.

Solution

1. Step 1: Check method syntax for emitting events

   In Vue, $emit must be called with this context inside methods.

2. Step 2: Identify the missing this

   The code calls $emit('notify') without this, causing a ReferenceError.

3. Final Answer:

   Missing this before $emit causes a ReferenceError. -> Option B

4. Quick Check:

   Always use this.$emit inside methods [OK]

Hint: Use this.$emit, not just $emit inside methods [OK]

Common Mistakes:

• Omitting this before $emit
• Thinking event names are restricted
• Expecting methods to return values after emit

5. You want a child component to emit an event change only when a new value is different from the old one. Which code correctly implements this logic inside the child?

hard

A. methods: {
updateValue(newVal) {
if (newVal == this.value) {
this.$emit('change', newVal)
}
}
}

B. methods: {
updateValue(newVal) {
this.$emit('change', newVal)
}
}

C. methods: {
updateValue(newVal) {
if (newVal !== this.value) {
this.$emit('change', newVal)
}
}
}

D. methods: {
updateValue(newVal) {
this.emit('change', newVal)
}
}

Solution

1. Step 1: Understand the condition for emitting

   The event should emit only if the new value differs from the current this.value.

2. Step 2: Check each option's logic

   The code that uses if (newVal !== this.value) { this.$emit('change', newVal) } correctly emits only on change. Code that emits unconditionally sends every time. Code using if (newVal == this.value) emits when values match (wrong logic). Code with this.emit uses invalid syntax.

3. Final Answer:

   methods: { updateValue(newVal) { if (newVal !== this.value) { this.$emit('change', newVal) } } } -> Option C

4. Quick Check:

   Emit only if newVal differs from current [OK]

Hint: Emit event only when new value differs [OK]

Common Mistakes:

• Emitting event unconditionally
• Using == instead of !== for change detection
• Calling this.emit instead of this.$emit