Vue.js higher order components

Алексей Мохнаткин

dizzymohnatkin@gmail.com

Что такое HOC

export default (WrappedComponent) => {
 return {
   name: 'HigherOrder',
   render(h) {
     return h(WrappedComponent, {
       attrs: this.$attrs,
       props: this.$props,
       on: this.$listeners,
       slots: this.$slots,
     }, this.$slots.default);
   },
 };
}

Не все так просто

Сложности с HOC во vue.js

HOC не знает про props оборачиваемого компонента
Магия с деструктуризацией
Магия со слотами

Что должен уметь делать HOC

Прокидывать props
Прокидывать события
Прокидывать слоты

Пример

Кодинг

Ваши вопросы

Ссылки

https://github.com/alexeyMohnatkin/vue-hoc-example

https://github.com/vuejs/vue/issues/6201

https://ru.vuejs.org/v2/guide/render-function.html

Vue.js higher order components

By dizzy mohnatkin

Vue.js higher order components

252

dizzy mohnatkin