好!欢迎访问迷津渡口 现在时间是:

迷津渡口

越感到迷惑 越接近真理

vue hoc高阶组件继承

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>

就是这样~

点赞0
 标签: vue hoc
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 恋恋风尘
  2. 恋恋风尘
  3. 恋恋风尘
  4. 恋恋风尘
  5. 恋恋风尘
  6. 恋恋风尘
  7. 恋恋风尘
  8. 恋恋风尘
  9. 恋恋风尘