Svelte Tutorial for Beginners #14 - Slots

Key Takeaways

alright then gang so we have our model now which opens and closes correctly as it should do and we also pass in this message as a prop to render inside the model now that's fine but what if we wanted to render something a bit more complex inside this model passing something like an HTML form that we can show well this method of using a prop is not really going to cut the mustard because we can't just send in a load of HTML as a prop so instead what we've use is something called slots in belts and slots give us a way to pass child content into a component and then render that content inside the component so how does this work well first of all let's get rid of the prop because we're not going to use that anymore and let's get rid of the message here and also the message right here so the way this works is that instead of this being a self closing tag we have an opening tag and a closing tag and then any Content that we pass down here as a child to the modal can be accessed as a slot inside this component itself so for example let me do an h3 right here and I'll say add a new person so below here we'll do a form and this form is going to be for adding a new person to the people array that we have up here so inside this form all I'm going to do at the minute is a couple of imports of tag text we'll give each one a placeholder as well so this first one is going to be for the name and then I'm going to duplicate this and the second one is going to be for the belt color and then below that we'll also do a button which says add person like so now we've not hooked up this functionality yet I'm just showing you how to use slots at the minute and we'll look all the functionality later on when we talk about forms but for now how do we then take this stuff that we pass through to the modal component right here as a child how do we take that and render it over here well we do it by using the slot keyword or the slot attack so inside the modal this is where we want to output it right all we need to do is say slot like so and we close it with a closing slot tag and then that is going to look for any child contents inside the modal and it's going to output it or right here where the slot is okay so if we save that and preview all we should see that form inside the modal which we do awesome so that's a simple way to take content and pass it in as a slot to another component right now we can also use something called named slots and the way we do that is by for example creating some more content right here and let me just take this and paste it in right here and in fact I'm going to comment this out at the top and I'm gonna give this a slot property and I'm gonna set that equal to what I'm going to call this slot so for example I could call this title right so now I'm passing in all of this content right here yet now if I go over to the modal and press open modal we don't actually see this right here this div with a slot of title this is an output this stuff is but this isn't and that's because we've given this a specific named slot and right here where we use the slot tags that locks for content passed into the component like this that doesn't have a specific slot anything else which does have a named slot has to be output specifically inside this component now the way we do that is by saying for example slot name so slot name is equal to and then whatever the name of the slot was in our case title so title like so and now that is going to look for a slot over here inside the modal with that slot name of title is going to grab that and it's going to output it right here everything else inside this that doesn't have a slot name is output where we have just the normal slot tags so if I save this we should see the title at the bottom and the cool thing about these named slots is it doesn't matter what order we pass them into the component it's South because we can then just access them in here and output them wherever we want for example I could do that at the top and then do a paragraph tag to say hey there and then save it and we should see the title at the top now then the paragraph tag then the form even though when we pass the content in the slot was at the bottom so these slots give us a way to essentially pass in options or different parts of contents into a component so let me now just get rid of this and let me get rid of this I don't need to use named slots in our example so I'm gonna save that and also I'm gonna take this and delete it and get rid of the comments up here so that now we're just passing in all the default content which is registered in this normal slot tag or right here so now we should see add a new person with that form so now we know about this and we can pass a form into this modal in the next video I want to talk a little bit more about forms so that we can start adding new data to this array over here