Introduction
Vue is a JavaScript framework that enables builders to create elements which are used to divide the consumer interface into smaller items, slightly than constructing the complete UI in a single file. When utilizing elements, we could wish to cross information down from the dad or mum element to the kid element sooner or later, that is often performed with properties, also referred to as props.
On this information, we are going to take a deep dive into props, we’ll check out how props work, the varied prop varieties, the way to cross numerous types of information, and much extra.
What Are Props?
Props generally is a essential idea to know when working with elements in Vue. Props, which stands for properties, allow us to cross information and performance from one element to a different. It is essential to know that props dataflow is one directional – we are able to cross information solely from a dad or mum to a toddler element, not one other manner round.
Notice: Props are read-only, which suggests the kid element can’t modify them as a result of the information is owned by the dad or mum element and is just handed all the way down to the kid element to learn it.
Declaring Props in Vue
Registering props is easy; all now we have to do is add it to the props array within the <scripts> tag. Then, we are able to use it in our app’s <template> part. This happens within the baby element, the place information is acquired from the dad or mum element:
<template>
<p>{{ identify }}</p>
</template>
<script>
export default {
props: ['name']
}
</script>
That is the Single File Part syntax. Alternatively, you possibly can register props for a selected element through:
Vue.element('user-profile', {
props: ['name'],
template: '<p>My identify is {{ identify }}</p>'
});
Declaring A number of Props in Vue
props are an array – you possibly can add as many as you want:
<template>
<p>My identify is {{ identify }} and I'm {{ age }} years.</p>
</template>
<script>
export default {
props: [
'name',
'age'
],
}
</script>
Props Worth Varieties
To this point, now we have solely handed string values, however, in actuality, any information sort will be handed as a prop – together with numbers, objects, arrays, Boolean, strategies, dates, and so forth.
Notice: After we use a static methodology to cross a quantity, object, array, and boolean values, we should bind them to inform Vue that this can be a JavaScript expression slightly than a string (matching the tactic’s identify).
So, to cross them, we cross them as a JavaScript expression (wrapped in quotes), which is evaluated to the proper information sort implicitly:
<template>
<UserProfile :age="22" />
<UserProfile :married="false" />
<UserProfile :hobbies="['Singing', 'Gaming', 'Reading']" />
<UserProfile
:identify="{
firstName: 'John',
lastName: 'Doe'
}"
/>
</template>
Nonetheless, implicit conversions aren’t with out fault in sensible settings. Normally – you may wish to specify the kinds explicitly.
Specifying Props Varieties Explicitly
Figuring out that we are able to cross any sort of knowledge as a prop, the perfect apply is to specify the kind of prop we wish to use by declaring them as a part of an object slightly than an array, and to explicitly specify the kind of that worth. That is helpful as a result of Vue sends a warning alert (in growth mode) to the console if the kind of information handed doesn’t match the required prop sort:
<template>
<p>My identify is {{ identify }} and I'm {{ age }} years.</p>
</template>
<script>
export default {
props: {
identify: String,
age: Quantity,
}
}
</script>
Passing Props Into Parts
Passing props into elements in Vue is just like passing HTML attributes into HTML tags, and this could settle for all forms of information, together with strategies. For instance, if now we have a profiles element and wish to cross consumer particulars into the consumer element, we are able to do one thing like this:
<template>
<UserProfile
v-bind:identify="consumer.identify"
:img="consumer.picture"
/>
</template>
Static and Dynamic Props
Props will be handed in one in all two methods: as a static worth or as a dynamic worth. By static, we imply that these values are handed immediately into the element with out the necessity for v-bind or : (semicolon):
<template>
<UserProfile identify="John Doe" />
</template>
Whereas for dynamic values we use the v-bind or its : shortcut:
<template>
<UserProfile :identify=identify />
</template>
<script></script>
Dynamic values could also be inherited from the information() possibility of our element script.
Passing Props With Ternary Operators
Oftentimes we wish to cross completely different information primarily based on the worth of a situation. In that case, the ternary operator is useful, as a result of we are able to use it inside a prop worth:
<template>
<div id="app">
<Residence :title="isHomepage? 'Welcome to the homepage' : 'This isn't the Homepage'" />
</div>
</template>
<script></script>
On this instance, we have checked the loggedIn worth – since it’s true (a consumer is already logged in) the ensuing prop worth shall be Log Out.
Passing Strategies as Props
Additionally it is potential to cross strategies as props all the way down to a toddler element, which works equally to passing different information varieties:
<template>
<ChildComponent :methodology="myFunction" />
</template>
<script></script>
Working With Props
As beforehand acknowledged, the first purpose of utilizing props is to cross down information. Say we’re constructing an app that shall be displaying consumer particulars – we are going to favor to create reusable elements in order that we are able to cross these information as props, slightly than manually creating separate element for every consumer. Let’s create a dad or mum element for that app:
<template>
<div id="app">
<UserProfile :identify='userName' age='22' />
<UserProfile :identify='userName' age='18' />
<UserProfile :identify='userName' age='27' />
</div>
</template>
<script></script>
And here is what the kid element will appear like:
Take a look at our hands-on, sensible information to studying Git, with best-practices, industry-accepted requirements, and included cheat sheet. Cease Googling Git instructions and really study it!
<template>
<div>
<h2>My identify is {{identify}} and I'm {{age}} years outdated.</h2>
</div>
</template>
<script></script>
Validating Props
Beforehand, we noticed that including prop varieties helps examine the kind of information returned by the props, which is a strategy to validate the props, however we are able to additionally add the required key and its worth to the prop, as proven under:
props: {
identify: {
sort: String,
required: true
}
}
Setting Default Prop Values
In some circumstances, we could wish to set default values in order that if the kid element is unable to get information from the dad or mum element, such information will be rendered:
props: {
studentUserName: {
sort: String,
required: true,
default: "pupil##"
},
studentPassword: {
sort: String,
required: true,
default: "password123"
},
userImg: {
sort: String,
default: "../default-avatar.jpg"
},
},
Notice: The default worth may also be an object or a way that returns a price.
Conclusion
Props are an important a part of Vue when utilizing elements. On this article, we have taken a take a look at what props are, the way to use them in Vue, the way to declare and register them, set default values, validate them, and so forth.
