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

Question

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

因此，我尝试在组件item中使用该组件folder，反之亦然，但是，我收到错误：unknown custom element: <item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.尽管我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>

Answer 1

这可能是由于组件之间的循环引用而发生的。

\n

\n

当您仔细观察时，您\xe2\x80\x99将发现这些组件实际上\n在渲染树中彼此\n是\xe2\x80\x99的后代和祖先 - 这是一个悖论！

\n

\n

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

\n

folder.vue

\n

<template>\n    <div class="folder">\n        <template v-for="(child, index) in children">\n            <item :last-item="index === children.length - 1" :key="child.id" :id="child.id"></item>\n        </template>\n    </div>\n</template>\n\n<script>\n\nexport default {\n    name: \'folder\',\n    props: [\'id\', \'hasChildren\'],\n    components: {\n        \'item\': () => import(\'./item.vue\')\n    }\n};\n\n</script>\n

\n