时间戳

首页 > 解决方案 > Vue组件循环自身：无法挂载组件：未定义模板或渲染函数

javascript - Vue组件循环自身：无法挂载组件：未定义模板或渲染函数

问题描述

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

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

包装器看起来像这样：

<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 警告]：无法挂载组件：未定义模板或渲染函数。

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

标签： javascriptvue.jsvue-component

解决方案

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

组件可以在自己的模板中递归地调用自己。但是，他们只能使用name选项这样做

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

推荐阅读