如何在VueJS组件中嵌套导入两个组件？

Question

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

所以我正在尝试在folder组件中使用item组件，反之亦然，但是我遇到了错误：未知自定义元素：“<item>”-是否正确注册组件？对于递归组件，请确保提供“名称”选项。 尽管我在两个组件上都设置了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

<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>
import Item from "./item.vue";

export default {
    name: 'folder',
    props: ['id', 'hasChildren'],
    components: {
        Item
    }
};
</script>

- Owen M

Answer 1

这可能是由于您的组件之间存在循环引用导致的。

仔细观察后，您会发现这些组件实际上在渲染树中既是子代又是祖先 - 这是一个悖论！

要解决这个悖论，您可以使用Vue.component全局注册您的组件，或者将其中一个组件的导入推迟到稍后（通过将导入移动到beforeCreate钩子或使用async components，如此演示）。

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>

- Husam Ibrahim

---

为什么应该使用异步组件？ - Phil

@Phil 我会听从你的意见，但在文档中，他们将其作为解决组件之间循环引用的方案呈现。 - Husam Ibrahim

这是一条非常有价值的信息，应该在你的回答中提到。它可以给人们访问你提供的链接提供一个理由。 - Phil

Answer 2

您需要在组件对象中提供键（名称），如下所示：

item.vue

components: {
    folder: Folder
}

folder.vue

components: {
    item: Item
}

- Daniel Fordyce

---

那么可以使用 <Folder> 和 <Item>。 - Phil