javascript - Vue 组件自循环 : Failed to mount component: template or render function not defined

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 中看到的那样，如果还有另一层 items.

通过这种方法我得到了

[Vue warn]: Failed to mount component: template or render function not defined.

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

Answer 1

根据docs你需要在你的组件中提供一个 name 选项，以便能够递归地使用它..

Components can recursively invoke themselves in their own template. However, they can only do so with the name option

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