Question

我有两个组件，一个item组件和一个folder组件。每个item都包含自己的folder组件，每个folder组件都包含item的列表。

因此，我尝试在item组件中使用folder组件，反之亦然，但我收到错误消息：unknown custom element: <item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.尽管我有{在两个组件上都设置了{1}}选项。有什么想法吗？

代码在下面

name

item.vue

<template> <div class="item" style="height: 30px"> . . . <folder v-if="item.hasChildren" :id="id"></folder> </div> </template> <script scoped> import Folder from './folder.vue'; export default { name: 'item', props: ['id'], components: { Folder } }; </script>

folder.vue

Answer 1

这可能是由于组件之间的circular referencing导致的。

仔细观察，您会发现这些组件实际上将成为渲染树中彼此的后代和祖先- 矛盾！

要解决此矛盾，您可以使用Vue.component在全球范围内注册组件，也可以将其中一个组件的导入推迟到以后（通过将导入移动到beforeCreate钩子或使用async components来演示here）..

folder.vue

<template>
    <div class="folder">
        <template v-for="(child, index) in children">
            <item :last-item="index === children.length - 1" :key="child.id" :id="child.id"></item>
        </template>
    </div>
</template>

<script>

export default {
    name: 'folder',
    props: ['id', 'hasChildren'],
    components: {
        'item': () => import('./item.vue')
    }
};

</script>

Answer 2

您需要像这样在组件对象中提供键（名称）

item.vue

components: {
    folder: Folder
}

folder.vue

components: {
    item: Item
}

如何在彼此内部导入两个VueJS组件？

2 个答案: