Vue $props Object
Example
Using the $props object to display the received props.
<template>
<div>
<h3>Received Props</h3>
<p>This is the $props object:</p>
<pre>{{ this.$props }}</pre>
</div>
</template>
See more examples below.
Definition and Usage
The $props object represents the props declared in the component, with the current values.
Props in Vue is a way to pass values as attributes to child components. See the Vue Tutorial page for Props.
The $props object can be used to for example pass props further down to the next child component (see Example 1 below), or to for example set up a computed property based on a prop (Example 2 below).
The $props object is read only.
More Examples
Example 1
Using the $props object to pass the props on to the next child component.
<template>
<div>
<h3>InfoBox.vue</h3>
<p>This is the $props object that is received from App.vue and passed down to the next child component:</p>
<pre>{{ this.$props }}</pre>
<grand-child v-bind="$props" />
</div>
</template>
<script>
export default {
props: [
'bagOwner',
'bagWeight'
]
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
margin-top: 20px;
max-width: 370px;
}
</style>
Example 2
Using the $props object in a computed property to create a feedback message based on the weight of the bag.
<template>
<div>
<h3>InfoBox.vue</h3>
<p>The $props object is used in a computed value to create a message based on the weight of the bag:</p>
<span>{{ this.bagWeightStatus }}</span>
</div>
</template>
<script>
export default {
props: [
'bagWeight'
],
computed: {
bagWeightStatus() {
if(this.$props.bagWeight>10) {
return 'Puh, this bag is heavy!'
}
else {
return 'This bag is not so heavy.'
}
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
span {
background-color: lightgreen;
padding: 5px 10px;
font-weight: bold;
}
</style>
Related Pages
Vue Tutorial: Vue Components
Vue Tutorial: Vue Computed Properties
Vue Tutorial: Vue Props
Vue Tutorial: Vue v-bind Directive
