?Vue的高階組件在官方文檔中并未提及，這個(gè)是一個(gè)舶來品，是React生態(tài)才有的一個(gè)概念。

但不妨礙我們使用它。

實(shí)際上Vue組件就是一個(gè)對象。根據(jù)高階函數(shù)的概念

在數(shù)學(xué)和計(jì)算機(jī)科學(xué)中，高階函數(shù)是至少滿足下列一個(gè)條件的函數(shù)：

接受一個(gè)或多個(gè)函數(shù)作為輸入。
輸出一個(gè)函數(shù)

高階組件也就是返回一個(gè)組件（對象數(shù)據(jù)）。

我們知道在使用Vue過程中，書寫模板的方式有三種：

使用render
使用template屬性
使用使用template模板

上述三種方式同時(shí)存在時(shí)，render的優(yōu)先級(jí)是最高的。這在源碼上是Vue首先對render這個(gè)參數(shù)做個(gè)判斷，一旦有就直接使用了。

高階組件有什么用呢？之前遇到一個(gè)問題，怎么對某些組件進(jìn)行全局有效性攔截？我給出的方案是用mixins混入的方案，實(shí)際還可以用高階組件。

比如我有一個(gè)Base.vue組件，一旦這個(gè)組件使用需要打印一些內(nèi)容。

// 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構(gòu)建一個(gè)高階組件，然后包裹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')
      }
    }
  }

但是這個(gè)方案要求使用的vue是完整版而不是運(yùn)行時(shí)版本。

使用render構(gòu)建的高階組件

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]), [])
          // 手動(dòng)更正 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>

以上案例高階組件用來進(jìn)行日志輸出。當(dāng)然也可以用來做權(quán)限校驗(yàn)。

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

我站在山頂看風(fēng)景！下面是我的家鄉(xiāng)！

總結(jié)

以上是生活随笔為你收集整理的Vue的高阶组件（HOC）使用举例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。