Simplify Vue Components with vue-class-component

Define Props on a Vue Class with vue-property-decorator

Place Content in Components with Vue Slots

Create Layouts with Named Vue Slots

Pass Props Between Components with Vue Slot Scope

Pass Props to Vue Functional Templates

Control Template Contents with Vue's Render Function

Avoid Semantic HTML Names for Vue Components

Write Vue Functional Components Inline

Pass Vue Render Functions as Props for Powerful Patterns

Switch Between Vue Components with Dynamic Components

Load Vue Async Components

Handle Errors and Loading with Vue Async Components

Advanced Fine-Grained Control of Vue.js Components

A common scenario is to present different components based on the state of the application. Dynamic components in Vue make this simple by providing a `component` element that simply needs to be bound to the component that you want to render. This example shows using a select dropdown in Vue to select the component to render.

Instructor: [00:00] To demonstrate dynamic components, I created three functional components, each one just returning an h1 with a different background and text.

[00:09] I'm going to make an array of these on my component. I'll call these comps, let's say one, two, and three. Then, I'll have a selected comp, which can be this.comps, and describe the first one.

[00:21] I'll use a select drop-down right in here, select, and I'll set up a v-model. That's bound to the selected comp. The options for this will be looping through v-for, where we say comp in comps, we'll make the key the comp.name. The whole label can be the comp.name, as well. Of course, I need the value bound to the comp.

[00:49] We have our drop-down with one, two, and three. When I change that, it'll change the selected comp, which makes it easy to use the component, which is a reserved component name in Vue. I can bind is to selected comp.

[01:05] From here, it's easy to go one, two, three. Whenever I select a component, my is changes to the selected comp, which can be either this one, that one, or that one, because I'm simply providing this list and a model to my select drop-down, three, two, and one.

Course

Advanced Fine-Grained Control of Vue.js Components

Switch Between Vue Components with Dynamic Components

Share this video with your friends