回顾Vue组件的常见写法(二)

回顾Vue组件的常见写法(二)

前面一篇提到的是比较基础的写法，这篇是对React的高阶式写法进行借鉴（Hight Of Component）

高阶组件？

准确来说应该是高阶函数（HOF），大家肯定做过将函数作为参数进行改造后再return出去的事，嗯哼，React玩家应该就对HOC这个概念有更深的认知，就是函数接收参数（这里传组件）再进行加工return出去的过程，Vue中似乎大部分人不这么做，更多的是借助了Vue自身提供的Mixins、extends去拓展组件，关于上面两个做法可以参考官网，这里简单说下Vue使用HOC的写法

HOC在Vue

我们来看下React，提供了Class继承组件写法，再将类组件作为函数参数，函数中再return一个Class组件，将参数挂在render函数中即可，那么Vue，我们观察下单文件组件里的代码，每次export default 出去的其实就是个对象，那么我们通过参考React的HOC写法那就不难了，只不过函数return出去的是一个内容格式和Vue单文件里暴露出去的对象:

export function BuilderWrap(wrap) {
  console.log("f", wrap);
  return {
    components: { wrap },
    template: '<wrap v-on="$listeners" v-bind="$attrs"><slot></slot></wrap>'
  };
}

使用：

import Vdirte from "./components/Vdirte";
import { BuilderWrap } from "./components/index";
const DeButton = BuilderWrap(Vdirte); //生成新的组件

这里仅仅是简单书写，还有很多玩法，大家可以自己多尝试下