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

Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control over how to render your content.

Instructor: [00:00] Another great thing about these functional components is that they're so small and simple, you can basically write them in-line. I'm going to write a cats object here, which'll be functional true, and have a render with its H and props. Right now, we'll just render out a div, hello.

[00:24] If I register cats with my components, then just drop my cats in instead of content, and make sure it lands in that content slot, you'll see I get a really tiny hello right there. What I'll do is I'll pass names in, and I'll create these names on my main component.

[00:45] Just come in here, delete all this. I'll say the names are Mindy, John, Kim, Joel, and Ben. Then these names can flow through the props of the cats. We'll just go ahead and render them out. We'll say props.names.map.

[01:08] Each name can map to a URL. I'll just write out a RoboHash here, slash-name, where the set is cats again. Then we'll map those URLs to image tags, where the source is set to the URL. Now, we have this sweet in-line component, where we have complete programmatic control over it using JavaScript, rendered out on our page.

[01:37] Let's just add one more prop here on cats. We'll just say num, because we're going to pass in a number. Pass in the number one, and I'll swap out this set number with props.num. This will switch over to robots. Then I can change this to two. Now, it's aliens. Three is robot heads, and four is back to cats.

Course

Advanced Fine-Grained Control of Vue.js Components

Write Vue Functional Components Inline

Share this video with your friends

Course

Advanced Fine-Grained Control of Vue.js Components