Why can't I mutate a prop directly?

This is called 'One-Way Data Flow'. It prevents child components from accidentally mutating parent state, which makes your app's data flow harder to understand. Always emit an event to ask the parent to change the data.

HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

⚡ Total XP: 0|💻 vuejs XP: 0

Components & Props in Vue.js

Learn about Components & Props in this comprehensive Vue.js tutorial. Understand the core of Vue architecture: Components, Props, and Custom Events.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

Break your application into reusable Lego bricks.

1Component Registration

In Vue 3 with <script setup>, using a component is as easy as importing it. You don't need to manually register it in a components object. Vue's compiler automatically makes it available in the template.

2Props (Data Down)

Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. You declare them using defineProps(). Remember: Props are strictly read-only inside the child component.

3Emits (Events Up)

Because children cannot mutate props, they must communicate back to the parent by emitting custom events using defineEmits(). The parent listens to these events using the standard v-on (or @) directive.