Components Composition: Vue Function API vs Renderless Components
Component composition is one of the best stuff modern JS frameworks have to offer.
From this point I want to thank Adam Wathan for showing me many use cases where using renderless Components is a magic pill.
In one of his great articles Adam shows how renderless component can be used to build reusable tags component.
It is 100% worth reading. You are going to be a better VueJS developer after this read. Mentioned link to Adam’s article:
https://adamwathan.me/renderless-components-in-vuejs/
Going through new RFC for function API for Vue 3 I wondered how would I implement the same usability. If you are interested in too, keep going ☟
For a starting point, I structured a component with Vue 2.x.
* the component has an input (binded newTag)
* methods like addTag and remove — both of them emits custom-event tagsUpdatedwith updated tags as a payload.
How would this look in Vue 3 API? ☟
So basically what have changed is:
* Methods (addTagand remove ) has been moved to new setup() function.
* Using value I have created reactive data with newTag.
As you can see the output and behaviour is the same in both components.
OK, but what if I wanted to create another tags component but this time place tags in one line (like the one below) and with extra functionality:
pressing backspace key whenever an input is empty will cause in deleting the last tag
Besides backspace handler, both of components uses the same functionality.
Now, how can we extract those common functionalities, so we don’t repeat ourself?
Mmixin? — would work but! with mixins you need to be very careful. There are easy to use but they are hard to maintain. Naming collapses are just terrible to “debugg” and even harder to fix.
Rrenderless component? — like the one from mentioned article? To me even better compared to a mixin. I personally love using slots and scoped-slots. The downside is that it is harder to use provided data from a child in a parent script area. It can be done but it doesn’t look very neat.
Vue3-function-API. It gives you all the benefits mixins does but without naming collapses.
☟… ☟… ☟…☟… ☟… ☟
I’ve created js file named TagsFuncs.js ☝️and I’ve moved all of our setup functions there.
Then all of the functionalities are exported in one tagsFuncs “setup” function.
What is left to do is to import this function in components and get all needed data from calling it in the setup(). ☟
I think this is super easy to use and it opens a whole new possibilities for structuring code.
Want to try? Play around with a code below.
Let me know what you think. Any feedback about the article is welcome.
NOTE:
The Vue Composition API is currently at work in progress stage and is subject to future changes. Nothing mentioned in the examples above is sure, and both syntax and use cases may change.
