Vue

How to use Props in Vue

Sponsor

Properties, often just called "props" are an important part of Vue, and are a key way we pass data to child components. In this guide, we'll be going over how to use props, and why we use them. The focus of this guide is Vue 3, although much of what is written is applicable to Vue 2 as well.

Properties or Props in Vue

One of the fundamental principles we use when building in many frontend frameworks like Vue, is that new pieces of functionality are usually built as components. For example, we may build a 'most popular' component, which looks something like this:

<MostPopular results="10" />

Presumably, the above component creates a list of most popular posts, and then shows only the top 10. As such, we can maintain the natural architecture that HTML puts in place, but build much more complicated custom HTML tags to use throughout our design.

In the example above, results is a prop. In the above example, we are passing data to the MostPopular component - that data is the number 10. The component then can use this information to show data in a certain way.

Props in Vue can be much more complicated than that, however. Let's take a look at how to define props.

How to define props in Vue

When we create a new component, we can create the props for that component inside our Javascript. For example, below, we create a prop called "MostPopular" with a prop called "results".

export default { name: "MostPopular", props: [ 'results' ], created() { // When the component is used/created, do something } }

Enforcing prop types in Vue

We can enforce the types of props by defining the types along with the prop's name. For example, the below example enforces the "results" prop to be a number.

export default { name: "MostPopular", props: { results: Number }, created() { // When the component is used/created, do something } }

Vue Prop Types

Props are not just limited to Strings or Numbers though. The following types are also allowed:

  • Objects
  • Arrays
  • Symbols
  • Functions
  • Numbers
  • Strings
  • Dates
  • Booleans

We can also have custom types - which can be defined in Vue using a Class

Boolean Types

If we set the type of our prop to Boolean, then simply writing the name of that prop automatically sets it to true. Omitting that prop will set it to fault. For example, the below HTML is equivalent of adding the prop :enabled="true".

<MostPopular enabled />

Adding more attributes to a prop in Vue

If we want to go further, we can make a prop required, or give it a default value. To do this, we can define our prop as an object. The below code now makes our results prop required, and gives it a default value of 8.

export default { name: "MostPopular", props: { results: { type: Number, required: true, default: 8 } }, created() { // When the component is used/created, do something } }

Using props in Vue

Now that we've covered the basics, let's look at how we use props. At it's most basic level, we can add a prop with just text or content like so:

<MostPopular results="20" />

However, we can also pass data or calculated values. Suppose we are storing some data in our Vue Javascript like so:

export default { name: "HomePage", data() { return { popularData: [{ name: "My First Post", views: 23453, url: '/my-first-post' }, { name: "My second post!", views: 2395392, url: '/my-second-post' }] } } }

Let's say we now want to pass popularData to our component via a prop called data. This can be achieved by using v-bind:, or : for short in Vue 3, before the prop. The below example now sets results to 10, and data to the value of mostPopular in our data function.

<MostPopular results="20" :data="popularData"/>

The great thing about this, is should popularData change, we can watch for this change in our MostPopular component, and update the data as we see fit.

Binding Objects as Properties in Vue

Since it's not uncommon to want to pass a piece of data as a set of props to a child component, we can do this using v-bind. Let's look at an example where we have a set of data in our parent component:

export default { name: "HomePage", data() { return { popularData: { name: 'Guide Document', ranking: 15, url: '/guide-document' } } } }

We can bind all the properties from popularData to our component by simply doing this:

<MostPopular v-bind="popularData" />

Which translates to..

<MostPopular :name="popularData.name" :ranking="popularData.ranking" :url="popularData.url" />

Mutating Props in Vue

It is bad practice to mutate props in Vue, since architecturally props form part of a one way data system. That means data is passed from parent to child, but not the other way around. As such, props are read only. If you want to update a prop value, you can instead store it in your data() function, and mutate the data variable instead.

export default { name: "MostPopular", data() { return { resultsData: 10 } }, props: { results: Number } created() { // Set our data 'resultsData' to the value of our prop, results // Note that props and data are both exposed on 'this' this.resultsData = this.results; // We can then mutate our data, rather than our prop. this.resultsData = 15; } }

Validating Prop Values in Vue

If we want to validate the value of a prop in Vue, we can use a validator function. That lets us check if the property conforms to a value that we expect. For example, let's say we expect results to either be 5 or 10 - we can check this with a validator function as shown below:

export default { name: "MostPopular", data() { return { resultsData: 10 } }, props: { results: { validator(value) { if(value === 5 || value === 10) { return true; } else { return false; } } } } }

Defining Vue Props in Composition API

Since Vue 3, we also have the composition API to think about in Vue. If you are defining props in the composition API, you have to use the defineProps function. Fortunately, it follows the same syntax as everything we've done before. For example, if we want to create a prop called name which has a default value of "my-prop" and a type of String, it'd look like this:

<script setup> import { defineProps } from 'vue'; const props = defineProps({ name: { type: String, default: "there" } });

Conclusion

I hope you've enjoyed this article. If you're brand new to Vue, don't forget to check out our article on how to create your first app. Otherwise, stay subscribed for more.

Last Updated Sunday, 13 February 2022
Johnny Simpson
Johnny Simpson

More Tips and Tricks Vue

Subscribe for Weekly Dev Tips

Subscribe to our weekly newsletter, to stay up to date with our latest web development and software engineering posts via email. You can opt out at any time.

Not a valid email