Vue JS 2 Tutorial #27 - Slots

hey well something going welcome to your 27th of UGS tutorial and in this video I want us to talk about slots [Music] okay so I've stripped out a lot of the culture and previous tutorials and I've just got this rib component right here up top view with an empty template and I've also imported another component called form helper from the components folder form helper dot view and that's this thing right here don't worry about the name of this file so now I'll explain that later and this just has a hate one in the template so nothing else going on in this component but what we are going to do is register that component right here saying the name of this component that we're going to use in the tag is form - helper and it's this thing right here we've just imported okay so I just want to nest this component form helper in this route component now so form - helper and let's just make sure that works if I view in a browser we can see I am the form helper which is in this form helper component so it has successfully nested that okay cool so we've seen in previous tutorials that we can pass data down to these child components using props right we could say something like V - bind and then the title is equal to something that we defined down here in the data right well what if we wanted to pass something a bit more complex such as a HTML template so we want to have some kind of HTML down to the child component and then output that HTML in this child component somewhere well we can do that not using props although we could if we pass a HTML string in here but probably not the best idea we can pass down a hit to our template using slots and this is pretty similar to something known as transclusion in angular so if you've used that before then if you're going to be pretty simple to understand but anyway we can pass HTML down using slots and the way we do that is twofold first of all we define within these tags within the component tags what HTML we want to pass down so say for example we want to pass down a very simple HTML template with 882 same I am the slots title and also a paragraph tag will say I the power of graph text for the slot okay whatever and if we save this now do you think that this is going to be output within this component right here somewhere well let's have a look in the browser no it's not anywhere and that's because we've not said where we want this slot to appear within this component all right so we've placed it within the component right here where we've nested it but we've not said within that component where we want to output that HTML and to do that we need to use the slot tag so say for example we want to output it underneath this h1 we can just place a slot tag beneath that h1 save that and then it's going to output whatever we put here where this slot tag is okay so let's view this now and we can see it right there so just to test let's place this above the h1 as well make sure it works and yet now it goes above the hey table cool so what if we want to output say for example this above the h1 but this below the h1 how can we do that what we can do it using two different slots so we could have a slot above but also a slots below now if we save this currently then both of these things are just going to output twice because UJS doesn't know which to place in slot 1 and which to place in slot 2 so it just places both of the tags in both so we need a way to say to view GS well I want the h2 here and we want the paragraph text here and we can do that by naming our slots so if I give this slot a name and I can do that by saying that the slot is equal to whatever name I want to give it and we'll call this the title and then I'll come down here and give this one a name as well I've seen slot is equal to text then save that we can now come over here and say ok we want the title slot there and the text slot here and the way we do that is by giving this an attribute called name so the slot name is equal to title in this instance and the slot name over here is going to be equal to the attack okay so let's save that and see if it works okay and if i refresh then you can see the slot title goes at the top and the slot text goes at the bottom cool so that is how we have multiple slots okay so we can output different content we place here in different places in this tag right here okay using different named slots okay so if we want to star these slots what can we do well we can just add styles as normal down here so I could say h1 and we'll give it a color of red save that cool so we can add styles right here now what if I want to add some kind of method or dynamic data so could I instead say for example of this output some kind of dynamic title well yeah I can do that but this time we don't do it in this component on the data right here we do it in the component where we kind of initialized this slot title okay so we can add the title property right there and say I am a dynamic slot to the title save that and we can see update right there okay now if this was to be defined on the component which is nested where we actually see the slots then let's see if this works save it and now we're not getting anything whatsoever so even though this HTML is being passed down into this component the dynamic data we output must be defined in this component right here okay where we use these kind of template tags so let's place it up there again and save it and again we get it working okay so these are just some simple examples and you might be thinking well this is pointless okay so why not just place this stuff right here instead of between these two tags why not just place it in here and save yourself all the work of naming slots what we could do that but I'm going to show you an example now where we can use slots which is beneficial so imagine this scenario we create a website with many different forms on it and we want to give the front-end developer a way to easily create these forms based on an existing template okay so we want the front-end developer to be able to specify some form fields a form header maybe what happens when you click on submit such as the form controls etc but we want the general outline in the structure of these forms to be the same on each one of them okay well we could use this idea of slots to do that so this is all going to be called player as we approach the end of this tutorial for now what we're going to do is create some kind of template for this form in this component this form helper component right so the idea is that a developer would use this component then add slots into it to pass their own data into it and that's going to create a form for them on a website so let's go ahead and start padding out this form so let's say we have h1 at the top of the form which says please fill out our form ok now this is going to be on the head of every form page then we're going to have a form tag and inside here we'll have a few different sections so we'll have a section for the form headers with a div ID equals 4 - header and then we'll have a section below that for the form field source a div ID equals form fields and then below this we'll have another section which is going to be for the form controls so say give id equals form - controls and then a bottom of that will maybe have some useful links or something like that so they give ID equals youthful links you know things like about OHS or something like that anything to do with forms so we'll the UL inside here to proof up and if you just going to be a little list of links so a live tag and a tag where the H ref doesn't really matter where theta records go in at the minute she's just a dummy links or settle into one I'm just going to copy this dude now and paste it down below a few times okay so now we've got this general kind of structure for our form okay and basically what we want to do now is be able to pass in things like a custom header some custom form fields a custom form control anything like that into this whole helper and tada we can do that using slots okay so say for example we could have a slot here we could have a slot with a name equal to form - header okay doesn't have to be the service this ID just happens to be so now we can inject content here from the parent component and it's going to be injected right here for the form header so we can have a custom header in this form we could do the same thing for this so let's just copy that and paste it down below and change this to form fields we'll give another one for the form controls and change this as well for fun controls so now we have kind of three editable regions on this component on this form helper and we can pass into these editable regions from the route component okay so when a developer now is creating a form we don't need to start creating a new form from scratch all the need to do is call the form helper right yes and then pass into the data the custom template that they want to appear in the different sections of this component so they could pass in if they wanted to a form header some form fields and some form controls okay and the structure of the form is going to remain the same in each case so let's pass some stuffing so the first thing I want to pass in is a slot for the form header so I'll say depth and remember we need to say slot equals and then the name must match up to this thing right here form header because this is where it's going to go so we'll copy that and paste it in there and the form header is going to have inside of it the h3 and it's going to include all of this stuff so when the slot goes in it's going to include everything that's nested within this slot as well so the h3 can be some kind of titles and custom title so this the title of the form and we can have a paragraph underneath if we wanted to and like information about the form and then what we'll do is another slot now for the form fields so we'll save give slopped equals form fields oops and then inside here we could pass in any number of form fields such as inputs or text areas that kind of thing I'm just going to do a couple of imports and there's going to be an import type of text and this is going to be for the user name or something like that so I said place holder equals name and this is going to be required okay and then what I'll do is another one down below and this is going to be for the password so I'll so tight equals password and placeholder is password and that's required as well okay so now we have these two sections these two different slots entering into our form help component in these two areas so now let's just do the form controls and this is just going to be a button we want to pass in a bottom with a function attached to it so that when user clicks on this button then something happens when we submit the form so we can add that in as well whether it give we'll do a gig right here with a slot equal to form controls and then in fat here we're just going to do a footing and this is going to have a click event attached to it or say V on click is equal to and don't submit and then we'll say submit okay so now we've passed all of these different things into this form helper we've not had to write out all that form just the different editable regions if you like and then this form helper is going to take all of those editable regions combine it together in this form with the structure already laid out any styles that we need to add here as well and it's going to output that for us just going to get rid of this star right here and save it and I'll save this one as well let's have a look in the browser so far and now we can see the form is made now it doesn't look great at the minute but we could also add some styles into this form health component as well so that no matter which form we create using this form helper they're all gonna look the same ok so we'll add these styles right down here I'm just going to copy and paste these from my github repository and you can get them from lesson 27 the link is down below so I'm just going to paste these right in there to save it and let's review this now cool so now every time we make a form on our website it would look something like this and yet I know the form styles are pretty crafty as well I just added some basic ones here just to kind of cut it out a little bit but the idea is we could have our own custom styles in this form helper and then every time we create a new form this is all we need to do we don't need to worry about styles we don't need to worry about the structure of creating the whole different form all we need to do is worry about these different slots these different sensible regions we're passing in to the form helper

Channel: The Net Ninja

Views: 101,806

Keywords: vuejs, vue js, vue js tutorial, vuejs tutorial, vue js 2, vue js 2 tutorial, vue js tutorial for beginners, vujs tutorial for beginners, vue js 2 tutorial for beginners, vuejs 2 tutorial, vue js slots, vue slots, vue js 2 slots, vue transclusion, vue slots tutorial, vue named slots, slots tutorial, tutorial, named slots tutorial, vue js multiple clots, vue js named slots

Id: F44OoFk8spg

Length: 15min 7sec (907 seconds)

Published: Tue May 09 2017