Is using slots in Vue a bad idea in terms of design?

user_5194466 0
Viewed 57

I've been learning about slots in Vue this afternoon. I think I understand how to code them but I wonder if they are a bad idea as far as design goes.

It seems to me that building things from self-contained components with clear ways to send the components data and to get data back from them is a central idea in Vue and is a very good idea. From what I've seen about slots today, they seem to undermine that idea rather dramatically by (potentially) moving a lot of the functionality from the component up to the root.

Is that a valid objection or am I just thinking of things the wrong way?

vue.js
1 Answers

You're thinking about things in the wrong way.

You acknowledge, very correctly, that:

...building things from self-contained components with clear ways to send the components data and to get data back from them is a central idea in Vue...

If we reframe slots as simply another means to "send a component data," then slots is just another means of doing what Vue already does well. The only difference between slots and a bounded field on a component is that slots let you "pass" whole components, instead of just bits of data.

Slots let Vue components better separate concerns, by allowing components to render "inside" another component without deeply interfering with the implementation of that component, which really aids that clarity you mentioned, rather than harm it.

As mentioned in the comments by @zero298, a modal component is a great example. A modal shouldn't at all care about what it's rendering as its body, it should only facilitate the process and structure that comes with, well, being a modal. Slots is one of the things in Vue that makes this compartmentalization possible.

user_110478240
Related