javascript - Vue 3.0.11 错误“无法解析组件”在递归组件上随机出现

Question

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

components:[comp1,comp2]

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

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

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 组件，只要成员变量有references 变量，也会引用它的父组件MetadataTree。

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

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

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

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

标签： javascriptvue.jsvue-componentvuejs3

Answer 1

我怀疑问题是缺少递归组件所需name的属性。

将name属性添加到TreeItem和MetadataTree：

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

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