After doing some research (google) I found it is possible to do HOC pattern in Vue.js. Anyway, I present you here my introduction to it, although you can find it here too.
So the HOC pattern consists in that you can do const CompWithThis= withThis(Comp) and also const CompWithThisAndThat= withThat(CompWithThis) and so on.
In this case withThis and withThat are HOC's, that is, higher-order components, which are functions that accepts a component as an argument and return another component.
Let's see the definition of withThis and withThat:
import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
`
export default
C=>
Vue.extend({
data(){
return {
d:1
}
},
render() {
return (
<Div>
<div>this is withThis:{this.d}</div>
<C/>
</Div>
)
}
})
and
import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
`
export default
C=>
Vue.extend({
data(){
return {
d:2
}
},
render() {
return (
<Div>
<div>this is with that:{this.d}</div>
<C/>
</Div>
)
}
})
As you can see they are pretty much the same. They take a component (C) as an argument and return a component which renders C.
Now let's see a simple component:
import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
`
export default Vue.extend({
data(){
return {
d:0
}
},
render(){
return (
<Div>this is ein:{this.d}</Div>
)
}
})
So we have this component, Ein. Now let's apply the higher order components to Ein and let's see the output:
import Vue from 'vue'
import s from 'vue-styled-components'
const Div=s.div`
font-family:sans-serif;
`
import Ein from './ein'
import withThis from './withThis'
import withThat from './withThat'
const EinWithThisAndThat= withThat(withThis(Ein))
export default Vue.extend({
render(){
return (
<Div>
<EinWithThisAndThat/>
</Div>
)
}
})
Previous was component App. Let's see main.js file which uses App:
import App from './components/app'
new App({
el:'#app'
})
The output of this in the browser will be:
Top comments (2)
🙁 this and that make it hard to understand. Looks like a factory pattern from what I can tell?
The HOC pattern it is meant to implement logic and also customizes rendering. Let's say you have a HOC called withDraggable that implements logic for drag and drop in the web. So with that HOC you can convert any component into a draggable component without having to implement each time the logic for drag and drop. I have a post published about it if you are interested (React).