• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 4/13/21

Pass Data Between Components

Log in or subscribe for free to enjoy all this course has to offer!

Defining Props as an Object

Earlier in this course, you learned how to use props to pass data to a component. However, that was merely the basic application. What if you want to be more explicit about what type of data needs to be passed down? What if you want to make sure the prop is always passed down, so your component has the required properties?

Let's find out!

What's elegant about defining props as a simple array of strings is that it is easy to read and understand. However, it lacks the complexity to ensure that our props work as we intend regardless of who is using them.

In the code below, you'll notice that the component takes three different props:

  • List

  • Title

  • Count

<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item"> {{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['list', 'title', 'count']
}
</script>

However, the problem is that these props have specific requirements. For example, title should be a string and list should be some sort of iterable data type like an array or object. Rather than hope that the right data is passed in, wouldn't it be great if you could prevent the wrong type? Well, as luck would have it, you can, by defining props using an object instead of an array of strings.

<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {},
title: {},
count: {}
}
}
</script>

In this new definition, the  props  property takes an object that contains the name of the props as keys with an associated configuration object. Start by configuring the type of prop expected with the key  type, which takes a JavaScript data type as its value.

<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array
},
title: {
type: String
},
count: {
type: Number
}
}
}
</script>

Also, if the component required certain props for it to function or look properly, it would be great if you could configure that as well. As you might have guessed, you can add that into your config object with the  required  key, which takes a boolean as its value.

<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array
},
title: {
type: String,
required: true
},
count: {
type: Number
}
}
}
</script>

Finally, you can also set a default value on properties to provide a fallback in case the prop is never defined. This is done with the  default  key and can take whatever value you need. In our example, it might look like this:

<template>
<div>
<h1>{{ title }} #{{ count }}</h1>
<ul>
<li v-for="item in list" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
},
title: {
type: String,
required: true
},
count: {
type: Number,
default: 1
}
}
}
</script>

Exercise

You will find the source code for the exercises in the course's GitHub repo in the  cafe-with-a-vue folder. To get started, check out the  P3C2-Begin  branch.

Instructions

Define prop properties using the object syntax in  MenuItem.vue  .

Let's Recap!

In this chapter, you have gained the knowledge to:

  • Define props using an object.

  • Define prop types to minimize potential bugs.

  • Define whether a prop is required.

  • Define a default value on a prop.

However, while props are great for passing information from the parent to the child component, they don't work the other way around. In other words, how do we communicate information from the child to the parent component? You'll learn a way to do that in the next chapter!

Example of certificate of achievement
Example of certificate of achievement