Props — component’s parameters, attributes
Props are like parameters in functions. Use props to customize components.
React 19, Functional componentsReact's design philosophy is "props are just function arguments."
Vue 3.5, Composition APIVue requires you to explicitly declare which props your component accepts using defineProps().
Props are reactive.
Vue props are deeply immutable from the child's perspective. Children should emit events back to the parent.
Example of using props
Default (fallback) values
React 19, Functional components Vue 3.5, Composition APIBoolean Casting
React 19, Functional componentsUsage
Vue 3.5, Composition APIUsage
The Boolean absent props will be cast to false.
An absent optional prop other than Boolean will have undefined value.
Required and Optional
React 19, Functional components- Optional — by default
- Required — add “isRequired” to the field in “propTypes”
Vue 3.5, Composition API- Optional — by default OR “required: false”
- Required — add “required: true” as a prop property
The Boolean absent props will be cast to false.
Conditional props
This pattern prevents developers from passing invalid prop combinations.
There are used discriminated unions with TypeScript. A discriminant (usually a literal type like variant: 'text') determines which other properties are valid. You use the never type to explicitly forbid properties in certain branches.
React 19, Functional componentsUsage:
Vue 3.5, Composition APIValidation
React 19, Functional components Vue 3.5, Composition APIWhen prop validation fails, Vue will produce a console warning (if using the development build).