Vue Component Communication Challenge: Event Bus and Props

Component communication is a fundamental aspect of building complex Vue applications. This challenge focuses on implementing two common methods: passing data via props and utilizing an event bus for loosely coupled communication between components. Understanding these techniques is crucial for creating modular and maintainable Vue applications.

Problem Description

You are tasked with building a simple application with two Vue components: ParentComponent and ChildComponent. The ParentComponent will contain a button that, when clicked, emits a custom event named update-message. The ChildComponent should listen for this event and update its displayed message accordingly. Additionally, the ParentComponent should pass a prop named initialMessage to the ChildComponent. The ChildComponent should display this initial message and update it when the event is received.

Key Requirements:

• Props: The ChildComponent must receive and display the initialMessage prop.
• Event Emission: The ParentComponent must emit the update-message event when the button is clicked. The event should carry a payload (a string) representing the new message.
• Event Listening: The ChildComponent must listen for the update-message event and update its displayed message with the payload received.
• Typescript: The entire solution must be written in Typescript, ensuring type safety.

Expected Behavior:

1. Initially, the ChildComponent displays the initialMessage passed from the ParentComponent.
2. When the button in the ParentComponent is clicked, the update-message event is emitted with a new message.
3. The ChildComponent receives the event and updates its displayed message to the new message.

Edge Cases to Consider:

• What happens if the ChildComponent is not mounted when the event is emitted? (While not strictly required to handle this perfectly, consider it for robustness).
• Ensure the Typescript types are correctly defined for props and event payloads.

Examples

Example 1:

Input: ParentComponent initialMessage: "Hello from Parent!"
Output: ChildComponent displays "Hello from Parent!"
Explanation: The ChildComponent initially displays the prop value.

Example 2:

Input: ParentComponent button click emits event with payload "New Message from Parent!"
Output: ChildComponent updates to display "New Message from Parent!"
Explanation: The ChildComponent listens for the event and updates its message.

Example 3: (Edge Case)

Input: ParentComponent emits event before ChildComponent is mounted.
Output: No immediate error. The event listener is set up when the ChildComponent is mounted, and it will react when it's available.
Explanation: Vue's event handling gracefully manages events emitted before components are mounted.

Constraints

• The solution must be written in Typescript.
• Use Vue 3.
• The update-message event payload must be a string.
• The initialMessage prop must be a string.
• The solution should be reasonably concise and readable.

Notes

• Consider using the provide/inject pattern as an alternative to the event bus, but for this challenge, focus on the event bus approach.
• You can use a simple ref in the ChildComponent to store and update the displayed message.
• Think about how to properly type the event payload and prop for type safety.
• The event bus can be a simple object with an emit and on method. You don't need to use a third-party library for this challenge.