关于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'})