Vue.js HOC

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="demo">

    <h3>baseComponent</h3>
    <base-component foo="bar" @hello="hello" @click.native="native">
        ⑤ default-slot
        <h4 slot="test">③ test-slot</h4>
    </base-component>
    <hr/>

    <h3>HOC04</h3>
    <enhanced-component4 foo="bar" @hello="hello" @click.native="native">
        ⑤ default-slot
        <h4 slot="test">③ test-slot</h4>
    </enhanced-component4>
    <hr/>
</div>

CSS

#demo {
  padding: 20px 80px 50px;
}

h3 {
  color: red;
}

h4 {
  background-color: yellow;
}

h5 {
  background-color: #ff4200;
  color: white;
}

p {
  background-color: #00cc66;
}

code {
  display: block;
  background-color: #ff9933;
  font-size: 15px;
}

hr {
  background-color: transparent;
  border: none;
  height: 100px;
}

JavaScript

const BaseComponent = {
    props: ['foo'],
    template: `
    <div>
      <h5 @click="emitHello">① emit event (must be alert twice time)</h5>
      <code>② props:{{JSON.stringify(this.$props)}}</code>
      <slot name="test"></slot>
      <p>④ between slots</p>
      <slot></slot>
    </div>
    `,
    methods: {
    	emitHello () {
      	this.$emit('hello');
      }
    }
}

const HOC04 = WrappedComponent => ({
		props: typeof WrappedComponent === 'function' 
    	? WrappedComponent.options.props 
      : WrappedComponent.props,
    mounted () {
    	console.log('mouted!');
    },
    // abstract: true,
    render (_) {
    		const h = this.$parent.$createElement
    		const slots = Object.keys(this.$slots).reduce((arr, key) => arr.concat(this.$slots[key]), []);
        console.log(slots)
        return h(WrappedComponent, {
        	attrs: this.$attrs,
          props: this.$props,
          on: this.$listeners,
        }, slots);
     }
});

console.log(typeof Vue.extend({}),Vue.extend({}))

new Vue({
    el: '#demo',
    methods: {
        hello () {
            alert('Hello!!');
        },
        native () {
            alert('Native!!');
        }
    },
    components: {
        BaseComponent,
        EnhancedComponent4: HOC04(BaseComponent),
    },
});