Components are reusable Vue instances with template, script, and style blocks. They encapsulate HTML, JavaScript, and CSS. Support props, events, and slots for composition. Can be registered globally or locally.
Props are custom attributes for passing data to child components. Define using props option or defineProps. Support type checking, default values, and required props. Example: props: ['title'] or defineProps(['title']).
Implement v-model using modelValue prop and update:modelValue event. Support custom v-model modifiers. Handle form input components. Example: v-model='value' or defineModel().
Define async components using defineAsyncComponent. Support loading and error states. Handle component lazy loading. Implement loading strategies.
Pass data to slot content using scoped slots. Support slot props. Handle template refs. Implement slot fallback content. Example: v-slot='slotProps'.
Extend components using extends option. Handle inheritance chain. Support mixin inheritance. Implement inheritance patterns.
Use $emit method or defineEmits to emit custom events. Parent components listen using v-on or @. Support event arguments and validation. Example: this.$emit('change', value) or emit('change', value).
Hooks run at specific stages of component lifecycle. Include created, mounted, updated, unmounted. Support setup and cleanup operations. Example: onMounted(() => {}).
Create reusable composition functions. Handle state sharing. Support composition hooks. Implement composition patterns. Example: useFeature().
Use ref attribute and ref() function. Access DOM elements and component instances. Handle template refs. Implement ref callback.
Implement component test strategies. Handle unit testing. Support integration testing. Implement test utilities. Handle test coverage.
Create complex composition patterns. Handle state sharing. Support composition hooks. Implement advanced patterns. Handle composition testing.
Create .vue files with template, script, and style sections. Support component logic, template syntax, and scoped styles. Example: <template>, <script>, and <style> blocks in one file.
Use provide/inject for dependency injection. Handle reactivity. Support injection key management. Implement injection inheritance. Example: provide('key', value).
Slots provide content distribution points in component templates. Support default content, named slots, and scoped slots. Enable component composition and content injection. Example: <slot name='header'>.
Register globally using app.component() or locally in components option. Support async components and dynamic registration. Example: components: { 'my-component': MyComponent }.
ref wraps primitive values, reactive creates reactive objects. ref requires .value for access in script. Both trigger reactivity. Use ref for primitives, reactive for objects.
setup runs before component creation. Returns reactive state and methods. Replaces Options API features. Access props and context. Example: setup(props, context).
Use emits option or defineEmits. Support event validation. Handle event modifiers. Implement event patterns. Example: emits: ['update'].
