Vue component props: The fundamental guide to use it

Props are used to pass down state to child components. Learn all about Vue component props through our fundamental guide in this article with ArrowHiTech

vue component props

What are props?

Props are how we pass variables and other information around between different components. This is similar to how in Javascript we can pass variables into functions as arguments:

const myMessage = "I'm a string";

function addExclamation(message) {
  return message + '!';
}

console.log(addExclamation(myMessage)); // I'm a string!

Here we pass the variable myMessage into the function as the argument message. Inside the function we can access that value as message.

Props work in a very similar way to this. We pass props to another component, and that component can then use that value.

But there are a couple rules you need to know about first.

Two main characteristics of Vue props

Above all, there are two specific things to keep in mind when dealing with props:

  1. Props are passed down the component tree to descendents (not up)
  2. Props are read-only and cannot be modified

To clarify, Vue uses one way data flow, meaning that data can only flow from a parent into a child component. You cannot pass data from a child to a parent.

In addition, because that parent component “owns” that value it passed down, the child can’t modify it. Moreover, if only one component is allowed to change it, it is easier to track down bugs since we know exactly where to look.

If the reasoning here isn’t super clear, that’s okay. You’ll understand how this works as you use Vue more and more. Just make sure you don’t violate those two rules and you’ll be golden.

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:

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

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 Vue component props to the component

You pass a Vue component props 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>

Conclusion

By now you should know everything you need to know about Vue component props in order to be a highly productive Vue developer.

However, there are always more things to learn. Vue (and software development in general) is a never ending learning process.

Any help with Vue JS development services? Let’s ArrowHiTech help you!

Contact us now!

Tags

Share