Vue Component Communication: Parent to Child and Child to Parent

This challenge focuses on mastering fundamental component communication patterns in Vue.js using TypeScript. You'll build a small application that demonstrates how a parent component can pass data down to its children and how child components can send information back up to their parent. Understanding these patterns is crucial for building dynamic and interactive Vue applications.

Problem Description

You are tasked with creating a simple "User Profile" application. This application will consist of a main App component (the parent) and two child components: UserProfileCard and UserActions.

The App component will hold the primary user data and will be responsible for passing this data down to the UserProfileCard. The UserProfileCard will display the user's name and email.

The UserActions component will contain a button. When this button is clicked, it should emit an event to the App component, signaling that the user's "favorite" status should be toggled. The App component will then update the user's data accordingly and pass the updated information back down to the UserProfileCard.

Key Requirements:

1. Parent to Child Communication: The App component must pass user data (at least name and email) as props to the UserProfileCard component.
2. Child to Parent Communication: The UserActions component must emit a custom event when its button is clicked.
3. Event Handling in Parent: The App component must listen for the custom event emitted by UserActions and update its internal state.
4. Data Reactivity: Changes in the App component's user data should automatically reflect in the UserProfileCard.
5. TypeScript Usage: All components and data structures should be defined using TypeScript.

Expected Behavior:

• The App component displays the user's name and email.
• The UserProfileCard displays the user's name and email received as props.
• The UserActions component displays a "Toggle Favorite" button.
• When the "Toggle Favorite" button is clicked, the App component should update a "isFavorite" boolean property associated with the user.
• The UserProfileCard should display a visual indicator (e.g., text like "Favorite" or "Not Favorite") based on the isFavorite status.

Edge Cases to Consider:

• Initial state of the user data.

Examples

Example 1: Initial Render

Let's assume the App component initializes with the following user data:

interface User {
  id: number;
  name: string;
  email: string;
  isFavorite: boolean;
}

const initialUser: User = {
  id: 1,
  name: "Alice Wonderland",
  email: "alice@example.com",
  isFavorite: false,
};

Input (Conceptual): The App component renders with initialUser. It passes name, email, and isFavorite to UserProfileCard. UserActions is also rendered.

Output (Conceptual):

• App Component: Displays the user information.
• UserProfileCard Component: Displays "Name: Alice Wonderland", "Email: alice@example.com", and "Status: Not Favorite".
• UserActions Component: Displays a "Toggle Favorite" button.

Explanation: The App component passes data down to UserProfileCard. UserProfileCard displays this data, including the initial isFavorite status.

Example 2: Toggling Favorite Status

Input (Conceptual): User clicks the "Toggle Favorite" button in the UserActions component.

Output (Conceptual):

• App Component: Updates its internal user state. If isFavorite was false, it becomes true.
• UserProfileCard Component: Now displays "Status: Favorite".
• UserActions Component: Remains the same.

Explanation: The UserActions component emits an event. The App component catches this event, updates the isFavorite property of its user data, and this change is automatically reflected in the UserProfileCard due to Vue's reactivity.

Constraints

• Vue Version: Vue 3
• Language: TypeScript
• Project Structure: You can assume a standard Vue CLI or Vite setup where you can create .vue files for your components.
• Data Source: For this challenge, hardcode the initial user data within the App component. No external API calls are required.
• Styling: Basic styling is optional, but focus on the component structure and communication.

Notes

• Props: Use Vue's defineProps for parent-to-child communication. Remember to strongly type your props.
• Emits: Use Vue's defineEmits for child-to-parent communication.
• Reactivity: Vue's ref or reactive from the Composition API will be essential for managing state in the App component.
• Slots (Optional but Recommended): Consider how you might use slots for more flexible content within UserProfileCard. This is an advanced consideration but good to think about for future scalability.
• Success: Success is measured by the correct implementation of parent-to-child data passing and child-to-parent event emission, resulting in a dynamically updating UI.