Communicating Data Between Nested Components

Passing Data from Child to Parent

Implementing Selection in CoffeePlan Component

Adding Local Selected State to CoffeePlan

Conditionally Applying Active Plan Class

Toggling Selection on Click

The Problem: Multiple Selections

Requirement: Single Selection in Plan Picker

Communicating Up with Custom Events

Defining Custom Events with defineEmits

Emitting a Custom Event ('hi there')

Refactoring Selection Logic into a Function

Accessing Emit Function from defineEmits

Using Vue DevTools for Component Events

Defining a Meaningful Custom Event ('selected')

Adding a Payload to Custom Events

Listening for Custom Events in the Parent (V-on / @)

Handling the Event and Accessing Payload ($event)

Storing Selected Coffee Plan in Parent State

Displaying Selected Plan at Parent Level

Summary of Custom Event Implementation

Shortening Event Handler with Automatic Payload Passing

Connecting Parent's Selected State to Child Styling

Passing Selection as a Boolean Prop to Child

Updating Child Component to Use Prop for Selection

Removing Local Selected State in Child

Verification of Single Selection Functionality

Alternative: Using Native Event Listener on Child

Issue with Native Event Listener Payload

Correcting Native Event Listener Implementation

When to Use Custom Events vs. Native Event Listeners