迷津渡口

react已经把老的mixin继承方式去除了，推荐使用hoc的高阶组件的方式进行继承，一般是往组件注入新的props。

vue实际上也可以使用这种方式对一些组件进行封装继承，一般是对外部组件进行继承，如下是对element-ui的Tabs组件进行HOC的继承

<script>
import { Tabs } from 'element-ui';

export default {
  name: 'OnlineNormalTabs',
  props: {
    ...Tabs.props,
    // 添加一个属性，用于判断是否为Button类型的头部样式
    isBtnHeader: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // 可以在相关的钩子函数添加埋点等处理
    console.log('挂载成功了');
  },
  destroyed() {
    console.log('组件被移除了');
  },
  render(h) {
    // 获取slots
    const slots = Object.keys(this.$slots)
      .reduce((arr, key) => arr.concat(this.$slots[key]), [])
      .map((vnode) => {
        vnode.context = this._self;
        return vnode;
      });

    return h('el-tabs', {
      on: {
        ...this.$listeners
       'tab-click': () => {
          this.$listeners['tab-click']&& this.$listeners['tab-click']();
          console.log('点击了');
        },
      },
      props: this.$props,
      // 透传scopedSlots
      scopedSlots: this.$scopedSlots,
      // 透传其他属性
      attrs: this.$attrs,
      class: {
        'el-button-tabs': this.isBtnHeader,
      },
    }, slots);
  },
};
</script>


<style lang="less">
.el-button-tabs {
  // 为按钮类型的头部书写样式
}
</style>

就是这样~