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 slots enable you to define where content of a component should land when you define the content inside of a parent component. You can also name slots to arrange the elements however you'd like and allow your component to build it's own content around the content that will be placed.

Instructor: [00:00] When we try and pass content into our app, add it just in here inside the JSX, I'll have an h2. I'll just say, "Where did I go?" When I hit save, you'll notice that "Where did I go?" simply does not show up.

[00:14] That's because in our template, we need to create a place for that to land. Right now, the root's in h1. I'm going to wrap this with a div. Now, the root is a div. Then I can tell that content to land right here, by saying slot. You can see "Where did I go?" is right there.

[00:30] Back in our index, I'm going to add a class here of text, orange, just to make it stand out a bit more. Then I configure my slots. Let's says that this has a name of footer. Then I'll have one above it which is a slot with a name of header.

[00:49] Now, "Where did I go?" will disappear again, but now, I can tell it here that I want it to show up in the header, so above, or in the footer, which is now below. If I create an h3, I'll call this footer. I'll call this header. I'll place the header in the header slot, place the footer in the footer slot, with a class of text, green.

[01:17] Hit save, and you can see we have a header and a footer where the slot names simply match up with the names here that tell them where to go.

Course

Advanced Fine-Grained Control of Vue.js Components

Place Content in Components with Vue Slots

Share this video with your friends