Vue Get Slot Props
Posted : admin On 4/6/2022Scoped slots are one of Vue's most powerful features, but it can be a bit tricky to understand how they work when first learning about them.
In this screencast (taken from my Advanced Vue Component Design course), I walk through how thinking of scoped slots as function props can make it a lot easier to wrap your head around them.
Learning More
If you enjoyed this screencast, check out Advanced Vue Component Design, a video series I'm working on that goes deep into tons of useful component design patterns.
Visit the website to learn more or subscribe below for periodic updates, more free screencasts, and a big discount when the course is released this May:
Scoped slots are a useful feature of Vue.js that can make components more versatile and reusable. The only problem is they're difficult to understand! Trying to get your head around the interweaving of parent and child scopes is like solving a tough math equation.
A good approach when you can't understand something easily is to try put it to use in solving a problem. In this article, I'll demonstrate how I used scoped slots to build a reusable list component.
In the provided CodeSandbox example, this file is named App.vue. The code shown here will serve as the foundation for displaying the components we will build. Next, we'll start building our components. In the example listed, there have been two components created in a folder named components. The first file we'll look at is UsrMsg.vue. Spread the love Related Posts How to create more complex slots in VueVue.js is an easy to use web app framework that we can use to develop Passing Props to Vue.js Route Components with Vue RouterVue.js is an easy to use web app framework that we can use to develop Create Styled Vue Components Easily.
Note: You can see the finished product in this Codepen.
The basic component
The component we're going to build is called my-list and it displays lists of things. The special feature is that you can customize how the list items are rendered in every usage of the component.
Let's tackle the simplest use case first, and get my-list to render just one list of things: an array of geometric shape names and the number of sides they have.
app.js
index.html
With a bit of CSS added, that will look the following:
Generalizing my-list
Now we want to make my-list versatile enough to render any kind of list. The second test case will be a list of colors, including a small swatch to show what the color looks like.
To do this, we'll have to abstract any data specific to the shapes list. Since the items in our lists may be structured differently, we'll give my-list a slot so the parent can define how any particular list will display.
app.js
index.html
Let's now create two instances of the my-list component in the root instance to display our two test case lists:
app.js
That will look like this:
Superficial components
What we've just created works fine, but is not great code. my-list is, by name, a component for displaying a list. But we've had to abstract all the logic for rendering the list into the parent. The component does little more than wrap the list with some presentational markup.
Given that there's still repeated code in both declarations of the component (i.e. <div v-for='item in ...'>), it'd be great if we could delegate this to the component so it isn't so superficial.
Never miss a new post!
Get our latest post in your inbox every Tuesday by subscribing to the Vue.js Developers Newsletter .
This subscription also includes Vue.js Developers promotional emails. You can opt-out at any time. View our privacy policy .
This form is protected by reCAPTCHA. The Google privacy policy and terms of service apply.
Scoped slots
To allow us to do this, we'll use a scoped slot instead of a regular slot. Scoped slots allow you to pass a template to the slot instead of passing a rendered element. It's called a 'scoped' slot because although the template is rendered in the parent scope, it will have access to certain child data.
For example, a component child with a scoped slot might look like the following.
A parent that uses this component will declare a template element in the slot. This template element will have an attribute scope that names an alias object. Any props added to the slot (in the child's template) are available as properties of the alias object.
Renders as:
Using a scoped slot in my-list
Let's pass the list arrays to my-list as props. Then we can replace the slot with a scoped slot. That way my-list can be responsible for iterating the list items, but the parent can still define how each list item should display.
index.html
Now we get my-list to iterate the items. Inside the v-for loop, item is an alias to the current list item. We can create a slot and bind that list item to the slot using v-bind='item'.
app.js
index.html
Note: if you haven't seen v-bind used without an argument before, this will bind the properties of an entire object to the element. This is useful with scoped slots as often the objects you bind will have arbitrary properties which now don't need to be specified by name.
Vue Get Slot Props Custom
Now we'll return to our root instance and declare a template within the slot of my-list. Looking at the shapes list first, the template must include the scope property to which we assign an alias shape. This alias allows us to access the scoped props. Inside the template, we can use exactly the same markup we had before to display our shape list items.
Now here's the full template:
Conclusion
Although this approach has just as much markup as before, it has delegated the common functionality to the component which makes for a more robust design.
Vue Get Slot Props Free
Here's a Codepen of the complete code:
Vue Get Slot Props Games
See the Pen Scoped Slots in Vue.js Components by Anthony (@anthonygore) on CodePen.