// Tutorial //

Intro to Component Props in Vue.js

Published on January 25, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
Intro to Component Props in Vue.js

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

When creating components with Vue.js, you’ll quickly find that components, even in a parent-child hierarchy don’t know anything about the parent or child. When you want to pass data to a child component, you use props. Props are a simple way of passing dynamic reactive data between components.

Passing Data

Say you have a parent component and a child component, and you want to pass the parent’s preciousThing data property down to the child. You can do so with a binding expression. A binding expression is simply an attribute with a v-bind: or : prefix that accesses a value in the parent component’s scope.

ParentComponent.vue
<template>
  <child-component :myProp="preciousThing"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },

  data() {
    return {
      preciousThing: 'ring'
    }
  }
}
</script>

Then, to accept it, the child component needs to declare that it wants the myProp property passed to it.

ChildComponent.vue
<template>
  <h2>The precious thing: {{myProp}}</p>
</template>

<script>
export default {
  props: [
    'myProp'
  ]
}
</script>

That’s all! The child component now has access to this.myProp. When preciousThing changes in the parent component, the myProp property on the child component will be updated as well.

Caveats

Literal Props

If all you want to do is pass a literal string to a child component, you do not need the binding expression (v-bind: or :). This is a common mistake. Rather, simply pass it as a normal HTML attribute, such as myProp=“string”. If you wish to pass a number or a boolean though, you must still use a binding expression (:myProp=“boolean”).

Changing Passed Data

Primitive values passed to a child component through props cannot be changed. Vue will throw a warning if you attempt to do so. However, complex values such as objects and arrays, while they cannot be reassigned, can be modified. This can cause all sorts of reactivity problems, so I’d highly not recommend doing so. Here are some alternatives instead.

  • If you wish to pass data back to the parent component, use events.
  • To keep data in sync between the parent and child, use v-model.
  • If you’d like to reformat the property passed down from the parent, but keep it reactive, use a computed property.
  • If all you want is the initial passed prop, and would like to modify it from there in the child, assign a data property to the initial value passed down from the parent on initialization.

Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!