Vue slots are a way of telling Vue where to place any content we write within a component's body. Today, we will be building houses to learn about Vue slots!
Before we begin, let's imagine Vue components as houses. For us to be able to enter a house, we would need to use a door; In our component, our
<slot> tags would serve as a door for our other components to enter. Let's make our first house!
We use the
slot element to tell our component where to display content. If we were to include our
HouseComponent into a village component like so:
We see that our component placed all its child elements into the living room. Vue does this through the default slot.
Having a house with just a living room isn't a comfortable place to live in; let's introduce more rooms into our house component using named slots!
We can add the
name attribute to our
slots to, you guessed it, name them. This gives us the freedom to position parts of the content within our template.
Let's refactor our
HouseComponent by adding more rooms and placing other elements within those rooms:
Let us notice two things about our new
First, we added a named slot called
dining-room at line 8. To put content into this slot, we use the
v-slot syntax in line 22. From here, we can see that
food are both placed between the two
chairs in the
dining-room: exactly where we placed our
Second, everything else between the
<house-component> tags that are not part of the named slots were rendered at the default slot, ie. within the
When this is rendered onto our page, it will look like this:
As we can see, we can use named slots to define layout for our markup. This makes components easy to compose and reuse. However, let's take it a notch higher, and introduce the concept of scoped slots to further improve our humble home.
Rooms in a house are not only defined by their position within the building, but also the activities that can be done within them! In the same way, Vue slots are not only a means of composing your components visually, but may also be used to expose interactions and data. This is done through scoped slots.
Components can bind data or methods to slots, like how they would with props. This allows the parent to interact with the component through the scoped slot. Let's add interactions to our
HouseComponent to really call it a "home".
There are a few things we should dissect before moving on.
First, notice that we added
v-bind directives to our named slots. These will allow the parent component to access anything bound to the slot as slot props. We added the
<script> portion of the component to define our methods and data. Let's now add furnishings to our new home!
As we can see, we still use the
v-slot syntax; however we appended a value to it. Each of our
v-slots have access to different slot props, each containing the methods we bound to them in our
HomeComponent. This means we can have different houses with different layouts, elements, contents, even components! Yet they all still have access to the functions of our
HomeComponent; in our case, switching the channel, watching TV, and eating together.
To conclude, we learned about Vue slots: how we can use named slots to lay out and compose our components (define our rooms), and how we can use scoped slots to expose functionality (add furniture).
I hope you found this article informative and easy to understand. Please do let me know if I have any errors in grammar or lapses in information that the reader would find helpful.
Thank you for reading, and good luck in building those houses!