component props definition
Component props are explicitly defined by a component using either defineProps() or the props option. They are what most people think of as props and are passed in from elsewhere.
props
49 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
VNode props definition
VNode props refers to the properties of the object passed as the second argument to h(). These can include component props, but they can also include component events, DOM events, DOM attributes, and DOM properties. You would usually only encounter VNode props if working with render functions to manipulate VNodes directly.
slot props definition
Slot props are the properties passed to a scoped slot.
props terminology
While the word props is derived from the word properties, the term props has a much more specific meaning in the context of Vue. You should avoid using it as an abbreviation of properties.
Merge behavior for regular props with v-bind
When v-bind is used alongside explicit prop bindings on the same component, for regular props the last value wins. Example: <BlogPost title="foo" v-bind="{ title: 'bar' }" /> results in title === 'bar'.
defineProps with array syntax
In <script setup>, use defineProps(['propName']) to declare props with an array of strings. Each string is a prop name. The props object returned contains the declared properties and can be accessed as props.propName.
defineProps with object syntax
In <script setup>, use defineProps({ propName: Type }) to declare props with type validation. The key is the prop name, the value is the constructor function (String, Number, Boolean, Array, Object, Date, Function, Symbol, Error) or custom class representing the expected type.
Difference between defineProps and props option
defineProps() is a macro used in <script setup> components to declare props. The props option is used in non-<script setup> components exported as default. Both use the same props options API, supporting array syntax and object syntax with the same validation rules.
Accessing props in setup with defineProps
When using defineProps() in <script setup>, assign the result to a variable like const props = defineProps(['foo']) and access props using dot notation: props.foo. When using non-<script setup>, setup() receives props as the first argument.
Props are readonly
Props are readonly and form a one-way-down binding from parent to child. Attempting to mutate a prop inside a child component will cause Vue to warn in the console. All props are refreshed with the latest value every time the parent component updates.
Prop name casing convention
Declare long prop names using camelCase (e.g., greetingMessage) because this avoids quotes when using them as property keys and allows direct reference in templates. When passing props to child components, use kebab-case convention (e.g., greeting-message="hello") to align with HTML attribute conventions.
Static vs dynamic prop passing
Static props are passed as plain values: <BlogPost title="My journey with Vue" />. Dynamic props use v-bind or its shortcut :: <BlogPost :title="post.title" /> or <BlogPost :title="post.title + ' by ' + post.author.name" />.
Passing number values as props
To pass a number as a prop, use v-bind to tell Vue it is a JavaScript expression rather than a string: <BlogPost :likes="42" /> or <BlogPost :likes="post.likes" />. Without v-bind, the value is treated as a string.
Passing boolean values as props
Including the prop with no value implies true: <BlogPost is-published />. For false, use v-bind: <BlogPost :is-published="false" />. For dynamic assignment: <BlogPost :is-published="post.isPublished" />.
Passing array values as props
To pass an array as a prop, use v-bind: <BlogPost :comment-ids="[234, 266, 273]" /> for static arrays or <BlogPost :comment-ids="post.commentIds" /> for dynamic assignment. Without v-bind, the value is treated as a string.
Passing object values as props
To pass an object as a prop, use v-bind: <BlogPost :author="{ name: 'Veronica', company: 'Veridian Dynamics' }" /> for static objects or <BlogPost :author="post.author" /> for dynamic assignment. Without v-bind, the value is treated as a string.
v-bind without argument for spreading object properties
Use v-bind without an argument to pass all properties of an object as props: <BlogPost v-bind="post" /> is equivalent to <BlogPost :id="post.id" :title="post.title" /> when post has those properties.
Merge behavior for event listeners with v-bind
When passing event listeners in a v-bind object, use the onEventName key convention. All handlers for the same event will be called. Example: <BlogPost @click="console.log(1)" v-bind="{ onClick: () => console.log(2) }" /> logs 1 and 2.
Using initial prop value as local data
When a prop is used to pass an initial value and the child wants to use it as local data afterwards, define a local ref that uses the prop as its initial value: const counter = ref(props.initialCounter). This disconnects the local state from future prop updates.
Transforming prop values with computed
When a prop is passed as a raw value that needs to be transformed, use a computed property: const normalizedSize = computed(() => props.size.trim().toLowerCase()). This automatically updates when the prop changes.
Mutating object and array props
While a child component cannot mutate the prop binding itself, it can mutate the object or array's nested properties because JavaScript passes objects and arrays by reference. This is discouraged; instead, the child should emit an event to let the parent perform the mutation.
Prop validation with type
To validate prop types, provide an object to defineProps() or the props option with type requirements. Each prop can specify a type using constructor functions (String, Number, Boolean, Array, Object, Date, Function, Symbol, Error) or custom classes.
Prop validation object structure
Prop validation uses an object with properties: type (constructor function or array of types), required (boolean, defaults to false), default (value or factory function for objects/arrays), validator (function that returns boolean). For objects and arrays, default must be a factory function receiving rawProps as argument.
Multiple possible types for a prop
Declare a prop with multiple possible types using an array: propB: [String, Number]. The prop value can be either a string or a number.
Required prop declaration
To mark a prop as required, include required: true in the prop definition: propC: { type: String, required: true }. All props are optional by default.
Required nullable prop
To declare a prop that is required but can be null, use array syntax: propD: { type: [String, null], required: true }. This requires the prop to be passed but allows null as a value.
Default prop value
To specify a default value for a prop, include default in the prop definition: propE: { type: Number, default: 100 }. The default is used if the resolved prop value is undefined (when prop is absent or explicit undefined is passed).
Default factory function for object props
For object or array prop defaults, the default must be a factory function: propF: { type: Object, default(rawProps) { return { message: 'hello' } } }. The function receives the raw props received by the component as the argument.
Custom validator function
Define a custom validator function for a prop: propG: { validator(value, props) { return ['success', 'warning', 'danger'].includes(value) } }. The validator receives the prop value and in Vue 3.4+, the full props object as the second argument. Return true if valid.
Function type prop with default
For function type props with a default value: propH: { type: Function, default() { return 'Default function' } }. Unlike object or array defaults, this is not a factory function—it is a function that serves as the default value itself.
Null and undefined handling in prop validation
When a prop type is specified, null and undefined values will allow any type and bypass type checking. An absent optional prop other than Boolean will have undefined value.
Boolean prop default behavior
A Boolean prop that is absent defaults to false. An absent optional prop of any other type defaults to undefined. You can change the Boolean default by setting default: undefined.
TypeScript type-based prop declarations
In <script setup> with TypeScript, declare props using pure type annotations: defineProps<{ title?: string; likes?: number }>(). Vue compiles type annotations into equivalent runtime prop declarations.
Reactive props destructure in Vue 3.5+
In Vue 3.5+, when destructuring props from defineProps in <script setup>, the compiler automatically prepends 'props.' to destructured variables, making them reactive. const { foo } = defineProps(['foo']) automatically becomes equivalent to watch(() => props.foo). In Vue 3.4 and below, destructured props are constants and do not change.
Destructured prop tracking in watchers
In Vue 3.5+, a watcher using destructured props will track changes: const { foo } = defineProps(['foo']); watchEffect(() => { console.log(foo) }) re-runs when foo prop changes. In Vue 3.4 and below, it runs only once.
Destructured props with default values
When using type-based prop declarations with TypeScript, you can use JavaScript's native default value syntax for destructured props: const { foo = 'hello' } = defineProps<{ foo?: string }>()
Passing destructured props to watch
Passing a destructured prop directly to watch() will not work as expected because it passes a value instead of a reactive data source. Instead, wrap it in a getter: watch(() => foo, /* ... */). This is the recommended approach for retaining reactivity when passing destructured props to external functions.
Runtime type checks for custom classes
The type for a prop can be a custom class or constructor function. Vue uses instanceof to assert the value: class Person { constructor(firstName, lastName) { ... } }; defineProps({ author: Person }). Vue will validate using instanceof Person.
Native constructor types for prop validation
The type property can be one of these native constructors: String, Number, Boolean, Array, Object, Date, Function, Symbol, Error.
Boolean casting with single type
A prop declared as Boolean type has special casting rules: <MyComponent disabled /> is equivalent to :disabled="true", and <MyComponent /> (absent) is equivalent to :disabled="false".
Boolean casting with multiple types
When a prop allows multiple types including Boolean, Boolean casting rules apply. The casting rule only applies if Boolean appears before String in the type array. Example: [Boolean, String] casts to true, but [String, Boolean] parses as an empty string.
Boolean casting with Number and Boolean
defineProps({ disabled: [Number, Boolean] }) casts the prop to true when present without a value.
Boolean casting with String and Boolean
defineProps({ disabled: [String, Boolean] }) parses the prop as an empty string (disabled="") when present without a value, because Boolean casting rule does not apply when String appears before Boolean.
Prop validation timing
In the options API, props are validated before a component instance is created, so instance properties (data, computed, etc.) will not be available inside default or validator functions.
defineProps scope limitation
Code inside the defineProps() argument cannot access other variables declared in <script setup>, because the entire expression is moved to an outer function scope when compiled.
Destructuring props loses reactivity
If you destructure the props object, the destructured variables will lose reactivity. It is therefore recommended to always access props in the form of props.xxx. If you need to destructure props or pass a prop into an external function while retaining reactivity, use the toRefs() or toRef() utility APIs.
Reactive props destructure in Vue 3.5+
In Vue 3.5 and above, variables destructured from the return value of defineProps are reactive. Vue's compiler automatically prepends props. when code accesses variables destructured from defineProps. The compiler transforms destructured variable references to props.variableName internally.
Default props values with destructure in Vue 3.5+
In Vue 3.5 and above, when using Reactive Props Destructure, you can use JavaScript's native default value syntax to declare default values for props. Example: const { msg = 'hello', labels = ['one', 'two'] } = defineProps<Props>()
Default props values in Vue 3.4 and below with type declaration
In 3.4 and below, to declare props default values with type-based declaration, the withDefaults compiler macro is needed. Example: const props = withDefaults(defineProps<Props>(), { msg: 'hello', labels: () => ['one', 'two'] }). Default values for mutable types should be wrapped in functions to avoid accidental modification and external side effects.