Advantages of using Slot in Vue.js

Question

Advantages of using Slot in Vue.js

Asked 5 years, 2 months ago

Viewed 85 times

1

What is the advantage of using the slot directive in Vue.JS?

I can create items with different information though, but if I pass an array with several different objects and pick them to print on the screen it’s no different... Of course, in my line of sight I’m an amateur...

It may sound silly, but the slot really has some benefit, which are?

According to the documentation:

Vue implements a content distribution API that is modeled after the current detailing of the specification of the Web components, using the element to serve as content distribution output.

I mean, content distribution output the directive v-for no longer does so?

Source:https://br.vuejs.org/v2/guide/components-slots.html

Take a look here, which is well taught: https://www.youtube.com/watch?v=UiqXVmHg7o&list=PLcoYAcR89n-q1vGRbaUiV6Q9puy0qigW&index=17&t=0s

– LeAndrade

2019/07/18 at 20:09
@Leandrade I came from there, so I’m here rsrs. I don’t want to be arrogant, but he didn’t explain the difference and only how he uses... I am not the first to ask, the video you sent me has some comments with some doubts also that have not been answered.

– user152996

2019/07/18 at 20:25
From what I read in blog post that the creator of Vue posted the new directive is already a preparation of how it will be in Vue 3 and has performance benefits... The RFC contains more information.

– fernandosavio

2019/07/18 at 20:25
1

I’m not going to formulate an answer because I don’t really understand the new operation, I hope the material helps you.

– fernandosavio

2019/07/18 at 20:26

1 answer

Browser other questions tagged html5 vue.js

You are not signed in. Login or sign up in order to post.

by Guilherme Zanini • 80 points · Answer 1 · 2019-08-06T18:25:30+00:00

The slot directive mainly serves to customize parts of the component in a more practical way, i.e., let’s assume that you have a card and this card has a standard footer with Save or Cancel buttons, but the need arose for you to use the card with other buttons in the footer, well, to avoid you keep adding several ifs on the card to suit the use you can simply add the slot, where it is possible to inject whatever you want in the footer.