Pass Props Between Components with Vue Slot Scope
Components with slots can expose their data by passing it into the slot and exposing the data using slot-scope in the template. This approach allows you to pass props down from Parent components to Child components without coupling them together.
Instructor: [00:00] To demonstrate slot scope, I'm going to wrap layout with a parent component, which I will call settings. Settings.view will be my new file, where I create a template with a root div. This will have a slot in it.
[00:16] On this slot, I can set properties. I'll set a header, and call it settings header. Then back in my app, I'll import my settings from settings, add it to my components, and then wrap layout with some settings. Now, my layout is being dropped into my slot here
[00:38] This slot knows that it has a header property, which is passing in this string. In my app, I can say the slot scope, and I'll just call this props. Then I'll create an h1 where my slot name is header, since that's going back into the layout.
[00:57] Then inside my header, I can say props.header. I'll hit save here. You can see we now have settings header, which is coming from my settings being passed down through this prop, then exposed through slot scope on props, and then used inside of the slot in the layout.
[01:16] Now, I can destructure this so that instead of saying props, it just says header. I'll do that there, get the same result, and now, in my settings, I'm going to add the script tag. I just have a template for this. I'll name this settings.
[01:33] Then on here, I'll say header is settings header, and footer is settings footer. Now, on here, I can pass these as values. I'll bind header to header. I'll bind footer to footer. Then in my app view, I can now grab the footer view.
[01:55] I'll create an h2 with a slot of footer that grabs the footer value. Hit save there, and now we have the settings footer, which is coming from the settings defined here, passed in through a property here, exposed here, and then rendered out here inside of the h2 slot being passed into the layout.
[02:18] I'm going to add a bit of styling here. I'll say background blue, text white, padding two. On my footer, we'll add a background of gray, a light gray, text blue, text center, and padding two as well. Then for my content, which has the slot of content, I'll add a class that's just padding four. We'll call this amazing content.
[02:48] I also want the flex grow to take up all the space. In my settings, I'll call this awesome site, and incredible copyright.