我坑我自己-vuecli3.0 + TS中应用HOC

FlexWrapper.vue 代码如下

<template>
  <TagConvert :tag="$attrs.tag" class="FlexWrapper">
    <slot></slot>
  </TagConvert>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import TagConvert from "@/components/TagConvert/TagConvert";
@Component({
  components: {
    TagConvert,
  },
})
export default class FlexWrapper extends Vue {}
</script>

<style lang="less">
/*
  .FlexWrapper 来源于 sf-atom-css
*/
</style>    

这样的组件还有FloatWrapper、InlineBlockWrapper、TextWrapper、TableWrapper 。

他们的区别就在于 名字，于是乎我只要新建一个FloatWrapper.vue 把代码黏贴过来，Ctrl+D 选中FlexWrapper，Ctrl+Shift+l选中全部匹配，替换，大功告成！

image

然而当我复制到TextWrapper 突然想起了 react中的HOC,于是我新增了文件

LayoutHOC.ts

import Vue from "vue";
import TagConvert from "@/components/TagConvert/TagConvert";

export default (argName: string) =>
  Vue.extend({
    components: {
      TagConvert,
    },
    render(createElement, context) {
      return createElement(
        TagConvert,
        {
          attrs: {
            class: argName,
            tag: argName,
            
          },
        },
        this.$slots.default,
      );
    },
  });

index.ts

import LayoutHOC from "./LayoutHOC";
export const TextWrapper = LayoutHOC("TextWrapper");

然后就报错了

Unknown custom element: <TableWrapper> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

然而在App.vue中我是注册了这个组件的

import {
  TextWrapper,

  TableWrapper,
} from "@/components/Layout";
@Component({
  components: {
    TextWrapper,
  },
})

就这样我按照上述逻辑排查了半天，你能想到的蠢方法我都试过，然后开始了愉快的注释代码阶段。

原来是tag: argName 这行代码有问题,TagConvert的功能大致如下

<TagConvert  tag="p">123</TagConvert>

转换为

<p>123<p>

tag: argName 使得去创建了一个TextWrapper的内部组件和App.vue那里的并不是一个...

修改好后

export const TextWrapper = LayoutHOC("TextWrapper");
export const FlexWrapper = LayoutHOC("FlexWrapper");
export const FloatWrapper = LayoutHOC("FloatWrapper");
export const InlineBlockWrapper = LayoutHOC("InlineBlockWrapper");
export const TableWrapper = LayoutHOC("TableWrapper");

简洁多了