VueJS part 10: Passing data to the components

Introduction

Recently, I started learning VueJS, and this article is part of the series of my notes while learning it. In the previous parts, I created some simple components. However, there is much more to them than what I used so far. And one of the basic requirements is passing data. In this post, I will be covering how to do that.

Initial component

First, I will start with the simplest possible component. A greeting component displaying just the text “Hello, John”.

<template>
  <div>Hello, John</div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: { }
}
</script>

Passing data to the component

The problem with this component is that it always displays the same name, John. Usually, you would want to change the name so it could be reused in different situations. And we could do that by passing that information to the component. We do this by using props. Since we are using components as if they are HTML elements, passing props is done as if they are attributes.

<Greeting name="John" />

In the code above, the name is hardcoded. In a real-world example, you would probably have such a thing somewhere in your script code, and you could use the variable name to pass it. This is done with the bind directive, v-bind, or the short notation.

<Greeting :name="name" />
<Greeting v-bind:name="name" />

Using data in the component

Simple props definition

If you want to use the passed props, you need to define in the component code which props it should expect. The simplest way is by adding a props property, containing the list of prop names.

<script>
export default {
  props: ["name"],
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

When you add a prop to the list, it doesn’t mean it needs to be used. But if you don’t add it, you won’t be able to use it.

Using props in templates and methods

Once you define props, you need to use them. One, and the simplest way is using them directly in the template by using the prop name.

<div>Hello, {{ name }} </div>

Another way is by exposing it in some way from the component script code. In it, you could access the props by accessing this.$props object. Then you could return the desired prop value in some type of method or the data object.

<script>
export default {
  props: ["name"],
  data() {
    return {
      personName: this.$props.name
    }
  },
  methods: {
    getName() {
      return this.$props.name
    }
  }
}
</script>

There is one important thing to remember. If you are assigning a prop value to some property in the data object, if that value changes in the parent, the data property won’t automatically update. That is because assigning to the data object only happens during the mounting process.

Advanced props definition

When declaring the props above, I did it using the array of props names. Alternatively, you could also declare them using the object. In that case, the key is the name of the prop and the value is the constructor function of the value expected type. If you are using TypeScript, you could also directly use the type annotations.

<script>
export default {
  props: {"name": String},
  data() {
    return {
      personName: this.$props.name
    }
  },
  methods: {
    getName() {
      return this.$props.name
    }
  }
}
</script>

This might be a bit of extra work, but it does have its benefits. In the case you accidentally pass some invalid value, you will get a warning in the console. And that can help you track the problem easier.

The code used in this article can be found in my GitHub repository.

For more, you can follow me on Twitter, LinkedIn, GitHub, or Instagram.