Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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>
Run Example »

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>
Run Example »

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>
Run Example »

Related Pages

Vue Tutorial: Vue Components

Vue Tutorial: Vue Computed Properties

Vue Tutorial: Vue Props

Vue Tutorial: Vue v-bind Directive