Components in Vue.js

Components is the fifth chapter of the free Vue.js tutorial. It teaches how to split a page into reusable .vue files, how those files share data and content, and how they live and die.

What each lesson covers:

• Components and Single-File Components: The component tree, the blocks of a .vue file, independent instances, local and global registration, naming, scoped CSS, :deep(), CSS modules, v-bind() in CSS and defineOptions().
• Props and Events: defineProps() with runtime options and types, defaults and validation, one-way data flow, defineEmits() and typed events, and v-model on components with defineModel().
• Slots, Attributes and Provide/Inject: Default, named, dynamic and scoped slots, renderless components, defineSlots(), attribute inheritance, inheritAttrs: false, useAttrs(), provide() and inject(), reactive provided values and InjectionKey.
• Lifecycle and Template Refs: The lifecycle stages and hooks, the Options API names, useTemplateRef(), refs in v-for, component refs, defineExpose() and cleaning up timers, listeners and requests.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

1. Components and Single-File Components

   What components are, component trees, parent and child, the blocks of a Single-File Component, independent instances, local and global registration, naming rules, scoped styles, :deep(), CSS modules, v-bind() in CSS and defineOptions(), and Tailwind CSS and UI libraries.

   • Split a page into components and use them in a parent
   • Explain the template, script and style blocks of a .vue file
   • Register components locally and globally and name them well
   • Style components with scoped CSS, :deep(), CSS modules and v-bind()
2. Props and Events

   defineProps() with runtime and type-based declarations, prop types, required props, defaults and validators, reactive props destructure, one-way data flow, deriving local values, $emit and defineEmits(), typed events, component v-model with defineModel(), many models and modifiers, and how components talk.

   • Declare props with runtime options or TypeScript types, with defaults and validation
   • Respect one-way data flow and derive local values from props
   • Send events up with $emit and defineEmits(), with payloads
   • Build components that support v-model with defineModel()
3. Slots, Attributes and Provide/Inject

   Default, fallback, named, dynamic and scoped slots, renderless components, $slots, useSlots() and defineSlots(), then fallthrough attributes, inheritAttrs: false, $attrs and useAttrs(), many roots, provide() and inject(), reactive provided values, app-level provide and InjectionKey.

   • Pass template content into a component with default and named slots
   • Send data back to the parent with scoped slots
   • Build renderless components and check which slots were given
   • Turn inheritance off and place $attrs where you choose
4. Lifecycle and Template Refs

   The life of a component from creation to mount, update and unmount, the Composition API lifecycle hooks with an Options API mapping, template refs with useTemplateRef(), refs inside v-for, component refs and defineExpose(), and common uses: DOM access, listeners, timers, requests and cleanup.

   • Describe the stages of a component's life
   • Run code at the right moment with lifecycle hooks
   • Reach DOM elements and child components with template refs
   • Clean up timers, listeners and requests when a component leaves