← Vue.js learning pathVue.js · Module 5 of 10
Components, props and emits
Split UI into components that talk with props and events.
📖 Key ideas
- Props pass data down: defineProps<{ title: string }>().
- Emits send events up: const emit = defineEmits(["save"]).
- Slots pass content into a component: <slot />.
- Register by importing in <script setup>.
- Props are read-only in the child.
💡 Real-life example: Props are instructions from a manager; emits are reports back to the manager.
definePropsDeclares component props
defineEmitsDeclares events the component sends
SlotPlaceholder for parent content
Named slotSlot with a name like header