LEARN BY CHANGING THINGSLESSON 01 / 06
Props down, events up.
One source of truth. Two components. A conversation.
01 The experiment
LIVE PREVIEW Try it. Everything is connected.
Parent.vue OWNS STATE
count = ref(0)
0
Update parent
The single source of truth
props.count →← increment
Child.vue RECEIVES
props.count
0
emit('increment')
✧
Why does this happen?
The parent owns the count. It sends that value down as a prop. The child asks for a change by emitting an event; the parent decides how to update its state.
What if the child changes a prop? ↗
03 Follow the flow / Event timeline
A clean slate. Change something to follow its story.
✎ YOUR TURNQUICK CHALLENGE
A little practice goes a long way.
Make the child request an increase of 2 instead of 1. Which component should update the count?