Vue 3.0.11 错误 "Failed to resolve component" 随机出现在递归组件上

Question

首先，我检查了本网站上所有类似的问题，没有发现任何相关问题。在大多数情况下，当您使用

时会发生此错误

components:[comp1,comp2]

这是不正确的，因为组件属性应该是一个对象。那不是我的情况。更有趣的是，这个问题是随机发生的。有时重新加载页面会使错误消失。我已经看到它运行了多次，然后在我不更改代码的情况下错误再次出现。

我正在构建一个 tree/hierarchy 结构，其中每个节点可以有多个子节点。每个节点都需要有自己的状态，因为我希望能够打开一个节点并保持其他节点关闭，同时能够从祖父组件关闭所有节点。结构如下

MetadataTree - 层级容器

<template>
    <ul>
        <li v-for="(value,key) in metadata">
            <TreeItem :type="key" :members="value" :parent-open="parentOpen" :key="key"/>
        </li>
    </ul>
</template>

<script>

import TreeItem from '@/components/TreeItem.vue'
import TheButton from '@/components/TheButton.vue'

export default {

    components:{TreeItem,TheButton},

    props:['metadata','parentOpen'],

}
</script>

对于每个项目，我使用一个 TreeItem 组件

TreeItem - 每个节点

<template>
  <div>
    <span class="icon-text">
        <span v-if="isOpen" class="icon">
            <i class="fas fa-folder-open"></i>
        </span>
        <span v-if="!isOpen" class="icon">
            <i class="fas fa-folder"></i>
        </span>
        <span class="type" @click="toggle">{{type}}</span>
    </span>
  </div>
  <li v-if="isOpen" v-for="member in members" :key="member.id">
        <span class="icon-text">
            <span class="icon">
                <i class="fas fa-code"></i>
            </span>
            <span><a :href="member.url" target="_blank">{{member.name}}</a></span>
            <Pill v-for="pill in member.pills" :pill="pill"/>
        </span>
        <p v-if="member.references">There are children 
            <MetadataTree :key="member.name" :metadata="member.references"/>
        </p>
        
  </li>
</template>

<script>

import MetadataTree from './MetadataTree.vue';
import Pill from '@/components/Pill.vue'

export default {

    components:{Pill,MetadataTree},

    props:['type','members','parentOpen'],

    data(){
        return{
            isOpen:false
        }
    }

那么您将看到的是 TreeItem 组件，还引用其父组件 MetadataTree，只要该成员变量具有引用变量即可。

所以当我加载页面时，只显示前 2 个级别，对于任何其他级别，都会在控制台中抛出错误

[Vue warn]: Failed to resolve component: MetadataTree 
  at <TreeItem type="CustomObject" members= (3) [{…}, {…}, {…}] parent-open=false  ... >

这让我觉得有些东西阻止了父组件被加载到子组件中。请注意，有一个基本情况 member.references returns false 并且树就停在那里。

只要存在防止无限递归的基本情况，是否支持让子组件引用其父组件？我还能做些什么来解决这个问题？

Answer 1

我怀疑问题是缺少 name 属性，即 needed for recursive components。

将 name 属性添加到 TreeItem 和 MetadataTree:

// TreeItem.vue
export default {
  name: 'TreeItem',
}

// MetadataTree.vue
export default {
  name: 'MetadataTree',
}

Vue 3.0.11 错误 "Failed to resolve component" 随机出现在递归组件上

Vue 3.0.11 error "Failed to resolve component" occurs randomly on recursive components

javascript

vue.js

vue-component

vuejs3