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
支持一下