Do you really understand Slots?

Tram Ho

image.png

In the process of working with Vuejs, everyone must have used slots before, but is there any other effect besides the function of adding html content from the parent component to the child component?

Let’s go through the examples and methods below to see if you really understand slots?

Component packaging

Problem

For example, with a simple dialog component like this with the library ElementUI

This component has an isVisible variable and functions that open and close dialog

But as the component expands and has more dialogs, the variables and functions increase

Iterative opening and closing functions, so how to optimize, we will go to the next part

Handle

Create a component called SlotDialog , this component will set a default slot, and has an isVisible variable with 2 functions used to open and close the dialog

And when used, we can get the props passed in 2 ways: v-slot or slot-scope

For the default slot, we can write as above, and for the slot example named body , the syntax will be

So in the above example we have seen that it is possible to use multiple dialogs without having to create the same variables and functions.

Nested Slots

Problem

Component Counter has 1 counter variable that will increment every second placed in the body slot slot

Header and Footer cards are also placed in their respective slots

This component will be used in many places, each place has a different requirement, is to change the content of the body or header , footer

The first way we think of would be to pass the condition props in and if else to change

And then every 1 request will be a new prop and add the if else , it will eventually become a pile of garbage

Thinking when designing a component that is shared in many places is how it can still be edited and extended without affecting other parts.

Component Counter nested inside Child and Parent components

The Child component will call the Counter component and will have slot tags available so that slots can be passed from the Parent component

Note that when passing a 2-tier slot like this, we will use the template tag, because if we use the div tag, the Counter component will understand that we are passing the slot with empty content from the outside and it will override the default slot. inside the slot

If using a div tag, you must add a condition so that only when there is a slot passed in from the Parent , it will be rendered

Handle

And now, we will use scoped slots technique to get the counter value from the Counter component out of the Parent

We can finally change the content from the Parent and still get the values ​​from within the Counter component

Optimal

The Child component’s way of writing above works, but when there are many slots and props, we have to rewrite a lot.

So we will use the for loop to render the slot cards

Conclusion

Scoped slot is a method that helps us to encapsulate variables and logic in one component, to avoid redundancy in code

But as the name implies, the scope of props taken from the slot can only work within that scope

So depending on each case, we will consider whether to use it or not, if used correctly, the effect of this method is great.

 

Share the news now

Source : Viblo