Vue 2 Internal Features from the Ground Up

Challenge 8: Passing Props

Evan You

Evan You

Creator of Vue.js
Vue 2 Internal Features from the Ground Up

Check out a free preview of the full Vue 2 Internal Features from the Ground Up course

The "Challenge 8: Passing Props" Lesson is part of the full, Vue 2 Internal Features from the Ground Up course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students pass props to control states in small component structures.


Transcript from the "Challenge 8: Passing Props" Lesson

>> Evan: So let's go back to exercise here. So for the first thing is that a very simple scenario. We have a parent component, a common parent component, and two to three child components. Then we run into a scenario where we want to share a piece of state between these two child components.

So naturally, a very straight forward solution is simply hoisted this common share state into your parent and pass them down to these child components as prompts, right? So if you look at this template, we have three instances of the counter component, and we're passing the same count, this same data down to these three instances via the count prop.

And then when you do incrementing in the parent scope, all of these will be effected. So, yeah, this exercise is essentially done for you because the template sort of explains everything. So let's just implement the counter component. That's all you need to do, yeah. So one small thing.

There was something missing in the util.js that we're gonna need later. If we go into util.js again.
>> Evan: So create test case. We need to add a third argument here.
>> Evan: Extra.
>> Evan: After adding that argument.
>> Evan: Before this load event, just call the extra with a [INAUDIBLE] the window objects.

So this is necessary for the routing tests later. I forgot to include this in the branch.
>> Evan: And I should probably
>> Evan: Let me just quickly reupload again.
>> Evan: Fix util.
>> Evan: Let's drop it in Dropbox. Okay, so Dropbox is updated. [COUGH]
>> Evan: Okay, so let's go back into the example just now.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now