components and props

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Custom class validation for props

Props can have a custom class as their type. Vue validates using instanceof check. Given class Person { constructor(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } }, you can declare author: Person and Vue will validate that the author prop is an instance of Person.

Validation failure behavior

When prop validation fails, Vue produces a console warning in the development build.

Nullable type declaration for required props

To declare a prop that is required but can accept null, use array syntax with null: type: [String, null], required: true. Note that using just type: null without array syntax allows any type.

defineProps() with type annotations in TypeScript

When using TypeScript with <script setup>, props can be declared using pure type annotations: defineProps<{ title?: string; likes?: number }>(). Optional properties use the ? modifier.

defineProps() macro syntax in Composition API with <script setup>

In Composition API with <script setup>, props are declared using the defineProps() macro. Pass an array of strings for prop names, or an object with prop names as keys and type constructors as values. Example with array: const props = defineProps(['foo']); access with props.foo. Example with object: defineProps({ title: String, likes: Number }).

Props are one-way data flow from parent to child

All props form a one-way-down binding: when the parent property updates, it flows down to the child, but not the other way around. Child components should not mutate props; Vue will warn in the console if attempted. Every parent update refreshes all child props with the latest value.

Prop validation object structure

Props are validated using an object with the following schema per prop: type (constructor function or array of constructors), required (boolean), default (value or factory function for objects/arrays), validator (custom function returning boolean). For objects and arrays, default must be a factory function. Validator function receives (value, props) as arguments in Vue 3.4+.

Valid runtime type checks for props

The type field can be one of the following native constructors: String, Number, Boolean, Array, Object, Date, Function, Symbol, Error. Type can also be a custom class or constructor function; validation uses instanceof check.

Prop validation example with all options

Complete prop validation example: defineProps({ propA: Number, propB: [String, Number], propC: { type: String, required: true }, propD: { type: [String, null], required: true }, propE: { type: Number, default: 100 }, propF: { type: Object, default(rawProps) { return { message: 'hello' } } }, propG: { validator(value, props) { return ['success', 'warning', 'danger'].includes(value) } }, propH: { type: Function, default() { return 'Default function' } } })

Boolean prop casting behavior

Props with Boolean type cast to true when the attribute is present without a value: <MyComponent disabled /> is equivalent to :disabled="true". When absent, it casts to false unless a default is specified. Boolean casting applies when Boolean appears before other types in a multi-type declaration: [Boolean, String] casts to true, but [String, Boolean] parses as empty string.

Prop name casing conventions

Declare long prop names using camelCase (e.g., greetingMessage) in the component definition. Pass them to child components using kebab-case in templates: <MyComponent greeting-message="hello" />. This aligns with HTML attribute conventions.

Passing different value types to props

Numbers, booleans, arrays, and objects must be passed with v-bind or : shortcut to tell Vue it's a JavaScript expression, not a string. Examples: :likes="42" for number, :is-published="false" for boolean, :comment-ids="[234, 266, 273]" for array, :author="{ name: 'Veronica', company: 'Veridian Dynamics' }" for object.

Binding multiple properties with v-bind without argument

Use v-bind without an argument to pass all properties of an object as individual props: <BlogPost v-bind="post" /> where post = { id: 1, title: 'My Journey with Vue' } is equivalent to <BlogPost :id="post.id" :title="post.title" />.

Merge behavior for explicit and v-bind prop bindings

When v-bind is used alongside explicit prop bindings on the same component, Vue calls mergeProps() to combine them. For regular props, the last value wins: title="foo" v-bind="{ title: 'bar' }" results in title === 'bar'. For event listeners, all handlers for the same event are called. class and style follow a similar merge strategy.

Using prop as initial value for local state

When a prop is used to pass an initial value and the child wants to use it as local data afterwards, create a local ref: const counter = ref(props.initialCounter). This disconnects the local data from future prop updates.

Computing derived value from prop

When a prop needs to be transformed, use a computed property that auto-updates when the prop changes: const normalizedSize = computed(() => props.size.trim().toLowerCase())

Mutating object and array props in child

While child components cannot mutate the prop binding itself, they can mutate nested properties of objects and arrays passed as props because JavaScript passes them by reference. This is generally discouraged; the best practice is to emit an event to let the parent perform the mutation.

Default prop value behavior with undefined

All props are optional by default unless required: true. An absent optional non-Boolean prop has undefined value. Boolean absent props cast to false. If a default value is specified, it is used when the resolved prop value is undefined, including when the prop is absent or explicit undefined is passed.

Prop options: type, default, required, validator

With object-based props syntax, each prop can define: type (one of String, Number, Boolean, Array, Object, Date, Function, Symbol, custom constructor, or array of those), default (a value or factory function), required (boolean, triggers warning in non-production if truthy and prop not passed), validator (custom function receiving prop value and props object, returns boolean).

Props can be declared in two forms

Component props can be declared in two forms: simple form using an array of strings (e.g., props: ['size', 'myMessage']), or full form using an object where each property key is the prop name and the value is the prop's type or advanced options.

Give your agent this brain