Props in Vue.js

From the Vue.js cheat sheet · Component Communication · verified Jul 2026

Props

Passing data to child components

vue
<!-- Vue 3 Script Setup -->
<script setup>
// Define props
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0,
    required: true,
    validator: (value) => value >= 0
  }
})

// Use props
console.log(props.title)
</script>
💡 Props are read-only, child should not mutate them
⚡ Use factory functions for object/array default values
📌 HTML attributes are case-insensitive, use kebab-case in templates
🔥 v-bind without argument passes all properties as props

Continue with Vue.js

Save the full cheat sheet or work through every related task.

More Vue.js tasks

Back to the full Vue.js cheat sheet