Skip to content

Vue.js 2 Component Props

New Course Coming Soon:

Get Really Good at Git

Props are used to pass down state to child components. Learn all about them

Define a prop inside the component

Props are the way components can accept data from components that include them (parent components).

When a component expects one or more prop, it must define them in its props property:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

or, in a Vue Single File Component:

<template>
  <p>{{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>

Accept multiple props

You can have multiple props by appending them to the array:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

Set the prop type

You can specify the type of a prop by using an object instead of an array, using the name of the property as the key of each property, and the type as the value:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

The valid types you can use are:

When a type mismatches, Vue alerts (in development mode) in the console with a warning.

Prop types can be more articulated.

You can allow multiple different value types:

props: {
  firstName: [String, Number]
}

Set a prop to be mandatory

You can require a prop to be mandatory:

props: {
  firstName: {
    type: String,
    required: true
  }
}

Set the default value of a prop

You can specify a default value:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

For objects:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

default can also be a function that returns an appropriate value, rather than being the actual value.

You can even build a custom validator, which is cool for complex data:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

Passing props to the component

You pass a prop to a component using the syntax

<ComponentName color="white" />

if what you pass is a static value.

If it’s a data property, you use

<template>
  <ComponentName :color=color />
</template>

<script>
...
export default {
  //...
  data: function() {
    return {
      color: 'white'
    }
  },
  //...
}
</script>

You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script>
...
export default {
  //...
  data: function() {
    return {
      color: 'white'
    }
  },
  //...
}
</script>
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching Summer 2024. Join the waiting list!
→ Get my Vue.js 2 Handbook

Here is how can I help you: