首页 > 其他分享> 文章详细

Vue的高阶组件（HOC）使用举例

2021-04-25 14:01:27 阅读：236 来源： 互联网

标签：Vue HOC Base template props 组件高阶

Vue的高阶组件在官方文档中并未提及，这个是一个舶来品，是React生态才有的一个概念。

但不妨碍我们使用它。

实际上Vue组件就是一个对象。根据高阶函数的概念

在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数：

接受一个或多个函数作为输入。

输出一个函数

高阶组件也就是返回一个组件（对象数据）。

我们知道在使用Vue过程中，书写模板的方式有三种：

使用render
使用template属性
使用使用template模板

上述三种方式同时存在时，render的优先级是最高的。这在源码上是Vue首先对render这个参数做个判断，一旦有就直接使用了。

高阶组件有什么用呢？之前遇到一个问题，怎么对某些组件进行全局有效性拦截？我给出的方案是用mixins混入的方案，实际还可以用高阶组件。

比如我有一个Base.vue组件，一旦这个组件使用需要打印一些内容。

// Base.vue组件
<template>
  <div>
    <span @click="handleClick">props: {{test}}</span>
    <slot></slot>
  </div>
</template>
<script>

export default {
  name: 'Base',
  props: {
    test: Number
  },
  methods: {
    handleClick () {
      this.$emit('Base-click',{
        msg:'子组件emit'
      })
    }
  }
}
</script>

我们可以使用template构建一个高阶组件，然后包裹Base

//template版本
export default function HOC (Base) {
    return {
      template: '<base v-on="$listeners" v-bind="$attrs"/>',
      components: {
        base: Base
      },
      mounted () {
        console.log('我是HOC mounted log')
      }
    }
  }

但是这个方案要求使用的vue是完整版而不是运行时版本。

使用render构建的高阶组件

export default function Console (Base) {
    return {
      mounted () {
        console.log('我是HOC mounted log')
      },
      props: Base.props, // 继承pros
      render (h) {
        const slots = Object.keys(this.$slots)
          .reduce((acc, cur) => acc.concat(this.$slots[cur]), [])
          // 手动更正 context
          .map(vnode => {
            vnode.context = this._self //绑定到高阶组件上
            return vnode
          }) // 继承slots

        return h(Base, {
          on: this.$listeners,
          props: this.$props,
          attrs: this.$attrs
        }, slots)
      }
    }
}

使用高阶组件

<template>
  <div>
    <wrapBase @Base-click="click1" :test="100">
       <p>default slot</p>
    </wrapBase>
  </div>
</template>
<script>
//Parent.vue
import Base from "./Base.vue";
// 使用hoc替代minxin
import HOC from "./hoc"; // 这里可以是template版本也可以是render版本
const wrapBase = HOC(Base);

export default {
  components: {
    Base,
    wrapBase,
  },
  methods: {
      click1(msg){
          console.log(msg, 'msg')
      }
  }
  //...
};
</script>

以上案例高阶组件用来进行日志输出。当然也可以用来做权限校验。

也可以参考文章：https://zhuanlan.zhihu.com/p/181673485

标签：Vue,HOC,Base,template,props,组件,高阶
来源： https://www.cnblogs.com/zhensg123/p/14699982.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue的高阶组件（HOC）使用举例