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

More Vue.js tasks

Back to the full Vue.js cheat sheet