While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the 'report an issue' button at the bottom of the tutorial.

All developers using component-based architectures, such as Vue’s and React’s, know that creating reusable components is hard, and most of the time you end up having a lot of props in order to make it easier to control and customize a component from the outside.

In terms of final output, slots perform a similar function as props in Vue — getting data from a parent component to a child component. However, whereas props pass data values to the component, slots can just pass direct template code. I think that this comes with a few benefits depending on the situation. A prop to apply a prefix or suffix to option labels. And now you have a select with 50 props. And there will still be something that someone wants to do with the component that isn’t covered by those props. So you can instead supply a slot for the options html, and pass the option data along with it to give the maximum configurability.

That’s not bad, but it’s true that passing lots of props can get a bit cumbersome and ugly. However, there’s a way for every Vue.js component style to cope with it.

Let’s take as an example the vuetify’s button component, one of the simplest ones. Say that we want to pass the same bunch of props in most cases:

It could make sense to have them in a separate file, let’s call it props.js:

JSX and Render Functions

Since they give you more power and flexibility when it comes to rendering, it’s fairly easy to pass multiple props at once.

In a render function:

And in JSX:

Using a Vue.js template

What about using the Vue.js DSL (or template)? No worries, that’s also possible. All you need to do is to use the v-bind directive. Given an object that you must define in the data option of your component it will bind all props:

With this trick you won’t need to fill your template with repeated props at several places in your app, while still being able to use the beloved template tag.

Wrapping Up

Passing multiple props to a component can be simplified using the examples mentioned in this article. This is especially useful for presentational and third party components that have lots of props.

Keep in mind that the examples used here are merely educational. If you want to stay DRY (Don’t Repeat Yourself) there could be better approaches depending on the specific case, such as creating your own wrapper components.

You keep reading about 'props'.

You've probably been using them too (even if you didn't realize it).

But maybe you aren't completely sure about what they are.

Vue Props Pass Array

Or how to use them properly and get the most out of them.

I was once in your position, not entirely sure of what I was doing and feeling like I was drowning. But I've learned a lot over the years, and now I want to pass that on to you.

By the time you're finished reading this guide, you'll know everything you need to know about props in order to be a super productive Vue developer.

And when your co-workers ask you how you know so much, just smile and tell them you're awesome 😉

In this guide we'll cover the most important things about props:

• What are props?
• Two main characteristics of props
• How to pass props to other components
• Adding prop types
• Making props required
• Setting default values

Plus many more things throughout!

Vue Slot Event

So, let's get started, shall we?

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:

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

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 (as you may have discovered)

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.

And because that parent component 'owns' that value it passed down, the child can't modify it. If only one component is allowed to change it, then it's 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.

Let's take a look at how we can pass props from one component to another.

Passing props to other components

If you want to pass a value from your component into a child component, it's exactly like adding an HTML attribute:

Looks like regular HTML, right? Not too scary.

The Camera component will then use the name and img props to render itself to the page. It might render something like this:

Here we render the name prop into the h2 tag, and use the img prop to set the src attribute on the img tag.

But what if we have this information stored in a variable somewhere?

To do that we need to use a slightly different syntax, since instead of passing a string we want to use a Javascript expression:

The line v-bind:name='cameraName' tells Vue to bind the Javascript expression cameraName to the prop name. A Javascript expression is any snippet of Javascript. It could be a variable name like we have here, or something more complicated.

For example, we could use a logical OR to use a default if we don't have an image for the camera:

More commonly, we use the shorthand for v-bind which is just : and reduces clutter in the code:

Because you can put in any arbitrary piece of Javascript, you can do a lot of nifty little things, such as dynamically adding a class name, or implementing a hover.

Adding in our Props

We're not quite there yet though.

Before this code will actually work, we need to get the Camera component to actually listen to the props. By default it will just ignore them.

To do this we have to add a props section to our component definition:

This is the bare minimum to get things working, but it's not recommended you do this. Instead, you should specify the type of the prop as well, using an object:

By switching from an array to an object, we can specify more details of our props, like the type. We can specify other things too, but we'll get to that in a bit.

Why do we want to add types to our props?

In Vue, props can be many different things. They can be:

• Strings
• Numbers
• Boolean (true or false)
• Arrays
• Objects

By adding in prop types like this we can set expectations for what we'll receive. If we set our camera's name prop to true it won't work properly, so Vue will warn us that we're using it wrong.

We'll add a rating to our Camera component so we can see what using a number looks like. First we add it to the prop types:

Then we'll also update our template so we display the rating on the page:

All we need to do is specify the prop name, no this is required. In a Vue template everything that can be accessed off of this is automatically included.

Now we can pass in a number as a prop:

Notice how we used the v-bind shorthand for this one. If we didn't do this it would get passed in as a String, which is the incorrect type.

Passing in an array or object or any other type works in the same way, using v-bind or it's shorthand.

Required props

Not all props are created equal.

Some of them are necessary for the component to work correctly.

Others are just extras, giving additional functionality if you need it.

For our Camera component, we definitely need a name, otherwise it doesn't make any sense. But we don't need an image, and we don't really need a rating either.

We can specify which props are required and which ones aren't in our prop definition:

Here we set our name prop to be required by adding required: true to its prop definition.

By default props are not required, so we don't need to touch the other ones. We could add required: false if we wanted to.

Default Values

Many times we'll want to set a default value on our optional props, since they may not be provided each time.

Earlier we saw how to add a default image if we didn't have one for our camera, but this is a better way:

Perfect!

Instead of cluttering up our template, we put the default value right alongside all of the other information about the img prop.

While we're at it, we should specify a default for our rating prop as well. Right now if it isn't set we'll just get undefined, which could cause some issues for us:

Now if the camera hasn't been rated, we'll get a 0 displayed instead of undefined.

Specifying types, adding defaults, and marking props as required are only a couple of the things you can do with prop types. I wrote an article with some killer tips on getting the most out of them.

Vue Pass Props To Slot

Using props outside of the template

While being able to use props inside of your template is great, the real power comes from using them in your methods, computed props, and other Javascript used in your component.

In our templates we saw that we just needed the prop name, like this: {{ rating }}. However, everywhere else in our Vue component we'll need to access our props using this.rating.

Let's refactor the app so that we use a standard URL structure for our images. This way we don't have to pass it to the Camera component each time, and we can just figure it out from the name.

We'll use this structure: ./images/cameras/${cameraName}.jpg

So if the camera is the Sony A6400, the URL will become ./images/cameras/Sony%20A6400.jpg. The %20 is from encoding the space character so we can use it in a URL.

First we'll remove the img prop that we no longer need:

Then we'll add a computed property that will generate the image URL for us:

Not all characters can be used in URLs, so encodeURIComponent will convert those for us.

Because we can access this computed prop in the same way as regular props, we don't need to change our template at all, and it can stay as we had it before:

In this way you can use the component's props in:

Vue Slot Pass Props Free

• Watchers
• Lifecycle hooks
• Methods
• Computed props

Props In Vue

And anywhere else in the component definition!

Vue Slot Pass Props Games

Conclusion

Vue Pass Component As Prop

By now you should know everything you need to know about 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.

In order to keep learning more about Vue, and to learn things as I figure them out myself, join my email list below for weekly updates!