Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Pass Props Between Components with Vue Slot Scope

    John LindquistJohn Lindquist

    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.

    vueVue.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss