@cubejs-client/vue provides Vue Components for easy integration Cube.js into Vue.js app. QueryRenderer Vue component takes a query, fetches the given query, and uses the slot scoped props to render the resulting data. Vue will only render the slots which it finds inside the TabCard component's template. So when the tabPanelSlotName is ‘tab-panel-lily' Vue will only render Lily's panel. When the tabPanelSlotName is ‘tab-panel-snape', Vue will only render Snape's panel. At last we have two methods, tabHeadSlotName and switchTab. Slot props allow us to turn slots into reusable templates that can render different content based on input props. This is most useful when you are designing a reusable component that encapsulates data logic while allowing the consuming parent component to customize part of its layout.
- These are render props in React and scoped slots in Vue. They work very similarly and provide a way to separate the behavior of a component from its presentation. Render props in React First, let's look at how we would restructure our autocomplete component using render props in React.
- Create a component that initializes our map. In the template, we create a container for the map.
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.
Vue V-slot Props
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.
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.
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
Vue Slots Vs Props For Real
This technique, props as component slots or however you think this should be called, avoids unnecessary prop handling and repeated type checking.
Vue Slot Event
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.
My recommendation is to hoist the element when possible.
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.
Vue Slots Vs Props Free
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.
