关于vue.js:Vue中的递归组件

前言

最近在做我的项目的时候遇到一个问题，在我的项目中应用了递归组件，我的项目运行时页面展现是齐全没有问题的，然而打包之后递归组件并没有解析，所以才有这篇文章来记录一下递归组件以及递归组件的注意事项。

什么是递归组件

递归组件：简略来说就是实现组件外部有调用本人的组件。
例如：

<template>    <div class="app-table-column" :class="tplClasses" @click="onCellClick">        <div class="app-table-column__label">            {{ column.label }}            <template v-if="tplSortable">                <template                    v-if="tplTableSort.key === column.key && tplTableSort.order"                >                    <i                        :class="table.iconsClassMap.sortIconAsc"                        v-if="tplTableSort.order === 'asc'"                    ></i>                    <i :class="table.iconsClassMap.sortIconDesc" v-else></i>                </template>                <i :class="table.iconsClassMap.sortIconNull" v-else></i>            </template>        </div>        <div            class="app-table-column__children"            v-if="(column.children || []).length"        >            <app-table-column                v-for="(child, childi) in column.children"                :key="childi"                :style="child.headStyles"                :column="child"            />        </div>    </div></template>

留神点

递归组件必须要给增加组件的name值，不然打包的我的项目无奈将递归的组件解析
例如：

@Component({ name: 'AppTableColumn' })