Vue.js: What is the difference between props and data?

Props — data passed from parent to child component. Data — internal component state.

Props:

• Passed from parent component.
• Read-only in child component (one-way data flow).
• Used for component communication.
• Can be typed with TypeScript.

Data:

• Internal to the component.
• Mutable by the component.
• Represents component state.
• Must be a function returning an object.

1<!-- Parent component -->
2<template>
3  <Child :message="hello" :count="5" />
4</template>
5
6<!-- Child component -->
7<script setup>
8const props = defineProps<{
9  message: string
10  count: number
11}>()
12
13// data() equivalent in Options API
14const internalState = ref(0)  // mutable internal state
15</script>

Key differences:

• Props — external, read-only, from parent.
• Data — internal, mutable, component state.
• Props flow down, events flow up.