How To Use Props in Vue

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">
</mostpopular>

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

javascript Copy
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 a fault. For example, the below HTML is equivalent to adding the prop :enabled="true".

<mostpopular enabled="">
</mostpopular>

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 its most basic level, we can add a prop with just text or content like so:

<mostpopular results="20">
</mostpopular>

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.

html Copy
<mostpopular results="20" :data="popularData">
</mostpopular>

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">
</mostpopular>

Which translates to:

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

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

Conclusion

I hope you've enjoyed this article. We've covered everything you need to know about Vue properties, which are crucial for using Vue properly. If you've enjoyed this, you can follow me on Twitter.