Implementing Custom Events in Vue with TypeScript

Custom events in Vue allow components to communicate with each other in a decoupled and flexible manner. This challenge will guide you through creating a Vue component that emits and listens for custom events, demonstrating a fundamental pattern for building interactive Vue applications. Understanding custom events is crucial for building complex, modular Vue applications.

Problem Description

You are tasked with creating two Vue components: MyEmitter and MyListener. MyEmitter will be responsible for emitting a custom event named my-custom-event when a button is clicked. This event will carry a payload of type { message: string }. MyListener will listen for this my-custom-event and display the received message in a designated area.

Key Requirements:

• MyEmitter Component:
  • Must have a button that, when clicked, emits the my-custom-event with a payload containing a message. The message should be "Hello from Emitter!".
• MyListener Component:
  • Must listen for the my-custom-event.
  • Upon receiving the event, it should update a data property called receivedMessage with the message from the payload.
  • Must display the value of receivedMessage in a <div> element.
• TypeScript: The entire solution must be written in TypeScript, ensuring type safety.
• Parent-Child Relationship: MyListener should be a child component of MyEmitter.

Expected Behavior:

1. When the page loads, MyListener should initially display an empty message (e.g., "No message received").
2. When the button in MyEmitter is clicked, the my-custom-event is emitted.
3. MyListener receives the event and updates its receivedMessage property to "Hello from Emitter!".
4. MyListener then displays "Hello from Emitter!" in the <div>.

Edge Cases to Consider:

• Ensure the event payload is correctly typed and handled.
• Consider what happens if the event is not emitted (initial state of MyListener).

Examples

Example 1:

Input: Clicking the button in MyEmitter
Output: MyListener displays "Hello from Emitter!"
Explanation: The button click triggers the event emission, which is caught by MyListener, updating its displayed message.

Example 2:

Input: Initial page load
Output: MyListener displays "No message received" (or similar initial state)
Explanation: Before the button is clicked, MyListener's `receivedMessage` is initialized, resulting in the initial message display.

Constraints

• The payload for my-custom-event must be of type { message: string }.
• The solution must be a functional Vue 3 component using the Composition API.
• The code should be well-formatted and easy to understand.
• No external libraries beyond Vue and TypeScript are allowed.

Notes

• Think about how to properly emit the event from MyEmitter and how to listen for it in MyListener.
• The Composition API provides a clean and organized way to manage state and event handling.
• Pay close attention to the TypeScript types to ensure type safety throughout the components.
• Consider using defineProps and defineEmits for clear component contracts.