Vue 3.0.11 錯誤“無法解析組件”在遞歸組件上隨機出現

Question

首先，我檢查了這個網站上所有類似的問題，沒有發現任何相關的問題。 在大多數情況下，當您使用時會發生此錯誤

components:[comp1,comp2]

這是不正確的，因為 components 屬性應該是 object。 那不是我的情況。 更有趣的是，這個問題是隨機發生的。 有時重新加載頁面會使錯誤 go 消失。 我已經看到它多次工作，然后在我沒有更改代碼的情況下再次出現錯誤。

我正在構建一個樹/層次結構，其中每個節點可以有多個子節點。 每個節點都需要有自己的 state，因為我希望能夠打開一個節點並保持其他節點關閉，同時能夠從祖父組件關閉所有節點。 結構如下

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 返回 false 並且樹就停在那里。

只要存在防止無限遞歸的基本情況，是否支持讓子組件引用其父組件？ 我還能做些什么來解決這個問題？

Answer 1

我懷疑問題是缺少遞歸組件所需的name屬性。

將name屬性添加到TreeItem和MetadataTree ：

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

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