In this guide, we will take a deep dive into props, we’ll take a look at how props work, the various prop types, how to pass various forms of data, and lots more.
What Are Props?
Props can be a crucial concept to understand when working with components in Vue. Props, which stands for properties, enable us to pass data and functionality from one component to another. It’s important to understand that props dataflow is one directional – we can pass data only from a parent to a child component, not another way around.
Note: Props are read-onlywhich means the child component cannot modify them because the data is owned by the parent component and is only passed down to the child component to read it.
Declaring Props in Vue
Registering props is simple; all we have to do is add it to the
props array in the
<scripts> tag. Then, we can use it in our apps
<template> section. This occurs in the child component, where data is received from the parent component:
<template> <p> name </p> </template> <script> export default props: ['name'] </script>
This is the Single File Component syntax. Alternatively, you can register props for a specific component via:
Vue.component('user-profile', props: ['name'], template: '<p>My name is name </p>' );
Declaring Multiple Props in Vue
props are an array – you can add as many as you’d like:
<template> <p>My name is name and I am age years.</p> </template> <script> export default props: [ 'name', 'age' ], </script>
Props Value Types
So far, we have only passed string values, but, in reality, any data type can be passed as a prop – including numbers, objects, arrays, Boolean, methods, dates, and so on.
<template> <UserProfile :age="22" /> <UserProfile :married="false" /> <UserProfile :hobbies="['Singing', 'Gaming', 'Reading']" /> <UserProfile :name=" firstName: 'John', lastName: 'Doe' " /> </template>
However, implicit conversions aren’t without fault in practical settings. In most cases – you’ll want to specify the types explicitly.
Specifying Props Types Explicitly
Knowing that we can pass any type of data as a prop, the best practice is to specify the type of prop we want to use by declaring them as part of an object rather than an array, and to explicitly specify the type of that value. This is useful because Vue sends a warning alert (in development mode) to the console if the type of data passed does not match the specified prop type:
<template> <p>My name is name and I am age years.</p> </template> <script> export default props: name: String, age: Number, </script>
Passing Props Into Components
Passing props into components in Vue is similar to passing HTML attributes into HTML tags, and this can accept all types of data, including methods. For example, if we have a profiles component and want to pass user details into the user component, we can do something like this:
<template> <UserProfile v-bind:name="user.name" :img="user.image" /> </template>
Static and Dynamic Props
Props can be passed in one of two ways: as a static value or as a dynamic value. By static, we mean that these values are passed directly into the component without the need for
<template> <UserProfile name="John Doe" /> </template>
While for dynamic values we use the
v-bind or its
<template> <UserProfile :name=name /> </template> <script> export default data() return name: 'John Doe' , </script>
Dynamic values may be inherited from the
data() option of our component script.
Passing Props With Ternary Operators
Oftentimes we want to pass different data based on the value of a condition. In that case, the ternary operator comes in handy, because we can use it inside a prop value:
<template> <div id="app"> <Home :title="isHomepage? 'Welcome to the homepage' : 'This is not the Homepage'" /> </div> </template> <script> import Home from './components/Home' export default data() return isHomepage: true, , components: Home </script>
In this example, we’ve checked the
loggedIn value – since it is
true (a user is already logged in) the resulting prop value will be
Passing Methods as Props
It is also possible to pass methods as props down to a child component, which works similarly to passing other data types:
<template> <ChildComponent :method="myFunction" /> </template> <script> export default methods: myFunction() ; </script>
Working With Props
As previously stated, the primary goal of using props is to pass down data. Say we are building an app that will be displaying user details – we will prefer to create reusable components so that we can pass these data as props, rather than manually creating separate component for each user. Let’s create a parent component for that app:
<template> <div id="app"> <UserProfile :name='userName' age='22' /> <UserProfile :name='userName' age='18' /> <UserProfile :name='userName' age='27' /> </div> </template> <script> import UserProfile from './components/UserProfile' export default data() return userName:"John Doe", , components: UserProfile </script>
And here’s what the child component will look like:
Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!
<template> <div> <h2>My name is name and I am age years old.</h2> </div> </template> <script> export default props: name:String, age:Number, </script>
Previously, we saw that adding prop types helps check the type of data returned by the props, which is a way to validate the props, but we can also add the required key and its value to the prop, as shown below:
props: name: type: String, required: true
Setting Default Prop Values
In some cases, we may want to set default values so that if the child component is unable to get data from the parent component, such data can be rendered:
props: studentUserName: type: String, required: true, default: "student##" , studentPassword: type: String, required: true, default: "password123" , userImg: type: String, default: "../default-avatar.jpg" , ,
Note: The default value can also be an object or a method that returns a value.
Props are a crucial part of Vue when using components. In this article, we’ve taken a look at what props are, how to use them in Vue, how to declare and register them, set default values, validate them, etc.