Vue组件循环自身：无法安装组件：模板或渲染函数未定义

Question

似乎无法弄清楚这一点。我有一个主包装组件，它使用另一个组件来呈现导航结构。

导航可以是多层次的，因此需要动态生成。

包装看起来像这样：

<template>
    <nav v-if="this.navigation.length">
        <link-role :collection="navigation"></link-role>
    </nav>
</template>
<script>
    import LinkRole from './Formats/LinkRole';
    export default {
        components: {
            'link-role': LinkRole,
        },
        props: {
            navigation: {
                type: Object,
                default: () => { return {} }
            }
        }
    }
</script>

和LinkRole像这样的组件：

<template>
    <ul>
        <li v-for="(item, index) in collection" :key="index">
            <a v-if="item.url" :href="item.url" v-text="item.name"></a>
            <span v-else v-text="item.name"></span>
            <link-role v-if="item.items" :collection="item.items"></link-role>
        </li>
    </ul>
</template>
<script>
    import LinkRole from './LinkRole';
    export default {
        components: {
            'link-role': LinkRole,
        },
        props: {
            collection: {
                type: [Object, Array],
                default: () => []
            }
        },
    }
</script>

正如您在其中看到的，LinkRole我正在循环遍历集合中的项目，并LinkRole在存在另一个级别的items.

通过这种方法我得到

[Vue warn]：安装组件失败：模板或渲染函数未定义。

但无法弄清楚是什么原因造成的。

Answer 1

根据文档，您需要在组件中提供一个name选项，以便能够递归地使用它。

组件可以在自己的模板中递归调用自己。但是，他们只能使用名称选项来执行此操作

import LinkRole from './LinkRole';
export default {
    name: 'link-role',
    components: {
        'link-role': LinkRole,
    },
    props: {
        collection: {
            type: [Object, Array],
            default: () => []
        }
    },
}