Place Content in Components with Vue Slots
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.
Excellent.