Intro to Component Props in Vue.js

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.

<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.

<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.