VUE
Free Section Starter Challenge
30 min
5. Component Props & Custom Emits (@event)
Overview: Establish unidirectional data flow in Vue 3: passing props down and emitting custom typed events up.
Concept & Syntax Guide
In Vue 3 Composition API, child components receive read-only data via `defineProps()` and notify parent components of actions via `defineEmits()`. This maintains predictable state across nested components.
Hands-On Practice Exercise
Create a Template Card with Purchase Emit
Build a component that accepts `title` and `price` props and triggers a `purchase` event when clicked.
Target Output:
SaaS Dashboard Template
Need a hint? Click here to reveal
Hint: Check syntax carefully and make sure your code contains:
SaaS Dashboard Template
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10