Pass Props to Vue Functional Templates
Functional templates allow you to create components consisting of only the template tag and exposing the props passed into the template with the props object off of the template context. This approach allows you to build simple configurable templates without having to write any backing code.
Instructor: [00:00] Since we're creating more and more files, let's go ahead and add a bit more organization to our project. I'll create a folder called source. I'll move app into it, index to it, layout, and settings. I need to tell Poi where my new index file is. This is in source. Poi'll just find off of main, and keep on trucking.
[00:24] Now, in my app, let's go ahead and create a header component to replace this. I'll create a folder called components with a file called header.view. Now, because header is going to be nothing more than a simple template that just has an h1 inside of it, I'm going to mark this as a functional template.
[00:42] Meaning that if I come into here, and I grab all of this, cut it out, and paste it in here, I can pass things into this template using props. If I use props.header -- right here, props.header -- that can get rendered out inside if that h1.
[01:01] You can see the state we're in right now is, our layout is asking us to add a header. We'll go ahead and import header from components/header. Add the header to our components, then drop the header into our layout, and say this slot is that of header.
[01:21] Now, this will make "please add a header" go away, and you'll see the styling. Then to pass the drop in, we'll bind header, the prop, to header off of the scope that's coming in from the settings. Now, we're back to the awesome site being displayed.
[01:35] I'll do a similar thing with the footer to show the process again. New file, footer.view. This is a template which is marked as functional. Switch back to my app, grab the footer h2, go back to my footer component, paste that in there, and make sure we're grabbing the props off of this, so props.footer.
[01:55] You'll see our layout is waiting for us to add this footer back. Back in our app, we can import our footer from components/footer, add our footer here, and drop our footer right here in the slot designated for footer, with footer bound to the scope footer property.
[02:19] You see, we're back to having our incredible footer. The header and the footer are only these templates marked as functional, and I can pass props in, and grab the values off the props. I don't have to write any sort of script or anything.
[02:33] Now, I'm also going to create a new file called index.js inside of my components directory, and then export or re-export these headers and footers, so header and footer. The way I can do this is you say export the default as header, and export the default as footer.
[02:57] Then in my app, instead of having multiple lines of imports off of my components, I can just go ahead and import header and footer from components. That will keep everything the same, with a quick recap of settings, the header, and footer are being exposed through the app off of the slot scope.
[03:18] The layout is defined here as multiple slots, waiting for a header, a content, and footer slot. In my app, I'm fulfilling those slots with a header, content, and footer, but grabbing the slot's scope off of the settings, and passing the header and footer values into properties on the header and footer.
[03:37] The header is simply a template marked as functional. Functional exposes the props, and renders out that header prop.