What Is a Prop in Vue?

In Vue, a "prop" (short for "property") is the mechanism used to pass data from one component to another — usually from a parent component to a child. Props are a core part of Vue's reactive data flow and create a one-way data connection between components.

The main characteristics of props:

1. One-way data flow: props pass data from parent to child in one direction. The child can read a prop but must not change it directly; if it wants a change, it usually emits an event to tell the parent.
2. Validation and type checking: Vue lets a component declare the types of the props it accepts, whether they are required and their default values, which makes components more reliable and robust.
3. Reactivity: props are part of Vue's reactivity. When a parent changes a prop's value, the child receives the change automatically and re-renders.
4. Customisation: props make components customisable and reusable — the same component can be used again and again with different data, reducing duplication and easing maintenance.

To declare props, you list in the component's props option the names of the props it accepts and, optionally, their types, default values and other validation rules. For example:

Vue.component('my-component', { props: { // Simple declaration title: String, //
With a type and a default value likes: { type: Number, default: 0 }, //
Required, with a type check isPublished: { type: Boolean, required: true } } });

This keeps the data flow between components clean and easy to follow.

Note (Vue 3): Vue.component is the Vue 2 global API. In Vue 3 the same props object is used in a component definition (export default { props: { … } }), or with defineProps({ … }) inside <script setup>.