Vue.js Component Props

#javascript #vue

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>

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

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

You can specify the type of a prop very simply 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:

String
Number
Boolean
Array
Object
Date
Function
Symbol

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]
}

You can require a prop to be mandatory:

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

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"
    }
  }
}

I'm working on a Vue.js course. If you're interested in learning Vue, get on the list to get a free 100+ pages ebook about the Vue fundamentals next week!