Named slots notice we pass the class to the sum only. That’s all there is to slots! Remember; The slot element is a placeholder for future content. A named slot is when we have more than 1 slot per component. The whole concept behind slots is to make code reusable as much as possible. Here’s the source code. The child component contains a prop called 'signal'. I would like to be able to change data called 'parentVal' in the parent component so that the children's signal prop is updated with the parent's value. This seems like it should be something simple, but I cannot figure out how to do this using slots: Here is a running example below. The previous chapter was an introduction to the basic concepts of Vue. We will start this chapter with a more realistic approach: we'll introduce Vue-cli. We'll look at the component hierarchy, global and local components, and communication between components. We will introduce slots, and we will also examine the difference between slots and props. As you can see, this looks very similar to the render prop in our React component. Here, we are returning a default scoped slot, which passes along an object with whatever we want. Here, we give it the results and our search method. In our autocomplete component, we use the slot-scope attribute to get access to the data from the child component.

Composing components with more granular and simpler ones already present in the codebase is a pretty standard situation inside both a web application and, as in my case, a design system repository.

Imagine for example a button component that you can use anywhere, but also a modal component that consumes it as part of its basic interface.

You might already have seen lots of different approaches and techniques for composition in React, like render props or child functions. In this case, I'm going to show you props as component slots or children prop.

And if you have a better name for this please reach out.

# Things to solve

The best way to explain this pattern, and where it shines, is to present the issues and code smells it solved for me.

# Prop 'drilling'

Let's go back to the example I mentioned with a button component available for use and also consumed by a modal and think about its possible prop signature.

The button's content could be the children prop, a kind prop to indicate whether it is a primary or secondary action, an icon prop in case we want an SVG image prepend inside its content and an onClick prop for the click event.

How modal should handle the customization of its button? The immediate thing we do is to match all the props at the component level.

Of course there's nothing particularly wrong with the code above and you are going to be just fine with this, specially if these two components are unlikely to change with time.

But if they do then maintenance might become a little pain, even more if you use this pattern for button a lot across your codebase.

It can get even worse if for some reason you have one more component layer between Modal and Button.

# Duplicated type definitions

Whether you are using prop types or any language superset to define types, you will have duplicated and unnecessary definitions all over the place, matching exactly the button props definition.

If the signature of the component expands, it will translate into even more work and duplicated definitions, and for something that might be trivial.

# Props as component slots

The solution I've found is to pass component through props, this allows you to render a component in a certain section.

Whenever we use Modal, we just pass an instance of Button to action.

I haven't experience any inconvenience by doing this. The result is cleaner and more extensible code as we pass the props to Button directly to the element.

Other stuff you can do is to force certain configuration of the component, for example let's force any button passed to be secondary.

No matter what the developer defines for kind in the button it will be ignored and 'secondary' will always be the prop value. This is super useful inside design systems when trying to force certain visual patterns.

# Type checking

One thing that I don't like much about this, and couldn't figure out a better way to do it, is prop type checking of the component is passed.

Slots Vs Props Vue On Tv

It's necessary to import the component and check the instance.

Before you say it, no, the following approach doesn't work.

I still think this is a small price to pay, giving all the unnecessary prop manipulation it's saved me, specially inside the design system repository on my current job where internal components are reused as much as possible.

# Wrap up

This technique, props as component slots or however you think this should be called, avoids unnecessary prop handling and repeated type checking.

Slots Vs Props Vue Online

I haven't detected performance regression around this, but if you do, think about the possibility of switching to another approach that still gives you these benefits while controlling better render cycles.

Slots Vs Props Vue App

My recommendation is to hoist the element when possible.

Slots Vs Props Vue Free

If the action doesn't depend on a higher prop to define its configuration, then turning it into a static element piece will avoid reconciliation around it.

For further reading, I recommend the Composition vs. Inheritance section of the official React docs where this approach receives a short mention at the beginning.