Vue Slots Simplified

view slots are a great way to design reusable components using the slot element to serve as a distribution outlet for different types of content okay what does that mean basically we can use slot elements to let a component accept any sort of template content allowing us to make more general components and cut down on repeated code this makes a lot more sense when we look at an example let's say that we have a component called my button and in its template all we have is a button and a slot when we use this my button component we can create it like this with some template code inside in this example the code inside is just some text that says click me when this component renders the slot will be replaced by click me and this is how slots work they allow us to inject template code into a child component and they work with all sorts of template code not just plain text in our example if you wanted to pass a div with some links our slot would work exactly the same and replace slot with all of this code as you can imagine this can be a very powerful way to eliminate duplicate code and organize your view project okay let's see exactly what this looks like by building our own example for example we're going to be creating a content area that allows captions this caption can be used for more information citing sources or really just anything you want to put so let's create a new view component called caption content and then inside our app.view component let's import our caption content in our script section and then render it inside our template section alright now we can go back into our caption content and start creating our component let's start off with a wrapper div and inside for now we'll put a placeholder image the link for the exact one i'm going to be using is in the description below for our caption since we want to be able to use links plain text or anything really we're going to want to use a slot so below our image let's create a paragraph element with a slot inside like we were just talking about we can pass fallback content that will display when we don't pass anything from our parent for this example i'm just going to say caption so if we don't pass anything the text will default to caption so if we hit save and look at what we have we can see that our app is rendering our placeholder image and caption perfect now let's actually pass in some values to our slot so in app.view we can add content inside our caption content and say source learnview.co hit save and there we go our slot is now getting its content from app.view again like we discussed earlier we can pass any sort of template code to our child component so let's make learn.view an actual link to the site and as expected it's all injected into caption content the next concept you need to understand is how to use multiple slots inside of your application obviously we want to be able to pass in our content and not just show this placeholder image so how do we do that and as you may guess we can do this by using another slot so let's head back to caption content and surround our image with another slot element giving this component two separate slots if we hit save we'll see something strange though our fallback image is replaced with the same content that we passed for our caption when dealing with multiple slots we need a way to differentiate between them so we're going to have to give them each a unique name there are two steps to using name slots in view first naming our slots from our child component using the name attribute and then second providing content to these name slots from our parent component using the v slot directive by default when we don't give them an explicit name attribute like in the examples above it has a name of default to give our slot a name slot elements actually have a special name attribute so let's go to our first slot and give it a name of content and then our second one and name a caption and that's all for the first step now we have to modify our parent component to pass content into each of these slots we can do this using the template tag since we already have the caption let's start there let's wrap all of this source information with a template element and then to make sure it's passed to our caption slot we can say v slot and then caption which is the name we gave it so now our content slot is not being passed anything so the fallback image is being displayed and then our caption slot is being passed right through the pro tip is that instead of typing out v-slot to reference name slots we can just use the pound sign followed by the name like this this is kind of similar to v-bind and the colon this is just the shorthand okay let's do something similar with our content we'll create a template element that links up to our content slot and inside we're going to pass it another image let's use this cute little profile picture of me and that's my author pick on learn view so we'll hit save and there we go we're properly using multiple slots the great thing about this is that we can pass any sort of content so let's copy and paste this component and then change our content to be an embedded youtube video and by the way you should definitely check out this video as you can see it still works great our caption is being passed and our embedded youtube video is being displayed all right the next concept you should know about is how to use data inside of our slots so for example so let's say instead of hard-coding our source we're getting it from our data inside script let's set up a data section with a property called source that's a string saying learnview.co then inside our slot let's replace this hard-coded learnview.co with our source property this works perfectly and why you might ask because slots have access to all of the data in the component where they're being implemented meaning in our case our slots will have access to all of the data inside app.view but let's say that our source data is not in app.view and it's actually inside captioncontent.view so let's cut this code out from here and paste it inside our caption content component if we save our source isn't being rendered anymore and once again that's because our slot only has access to the data inside app.view luckily for us vue gives us a way to fix this scoped slots simply put scope slots allow our slot content and our parent component to have access to data that's only found in the child there are two steps that we need to do this first we have to make source available to the slot content by using v bind and then second we want to use a v slot on our parent scope to access the slot props this makes a lot more sense when we just do it so first to make our source available to the parent component we can bind it as an attribute onto our slot these bounded attributes are slot props so on our caption slot let's say v bind colon source which binds a property called source onto our caption and then we want to bind this value to the value of source coming from our data like this and that's all we need to do inside of caption content but back in app.view let's actually get all of this binded data to do this we need to add on to our v-slot or our pound sign caption by saying equals and then creating a javascript expression that grabs our source and this is getting all of the data that is binded into this specific caption slot so now when we're calling source down here we know exactly what we're trying to get so let's save everything and our app is working exactly as expected the great thing about this v-bind and v-slot solution is that you can bind as many properties as you want onto each slot and then to access them it works just like this so all of this information on how to use basic slots create multiple name slots and pass the data from a child component to its parent using scope slots is extremely useful in creating flexible components i hope this helped you out and if it did please like and subscribe to help support learnvue and leave any questions down in the comments down below see you in the next video

Channel: LearnVue

Views: 10,772

Keywords: vuejs, web development, javascript, programming

Id: orGcdmCRCc0

Length: 7min 24sec (444 seconds)

Published: Tue May 04 2021