Vue 2 Internal Features from the Ground Up

Challenge 6: Dynamically Render Components

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 6: Dynamically Render Components" 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 iterate through implementations of rendering a component.

Preview
Close

Transcript from the "Challenge 6: Dynamically Render Components" Lesson

[00:00:00]
>> Evan You: So let's move onto the next exercise and it's going to be very similar, but with slightly different requirements. So 3.2. Instead of dynamically rendering tags, we're now trying to dynamically render different components. So the goal is to first implement two very simple components, Foo and Bar, and all that you should render is just Foo and Bar inside a div, and do that with a render function obviously.

[00:00:29]
And next we're again going to implement an example component. And this time this example component is going to take an ok prompt. If ok is true, this example component will simply render the Foo component. And if ok is false, it'll render the Bar component. And then in the root component, we want a button that allows us to toggle between Foo and Bar.

[00:00:58]
And the boiler plate looks like this.

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