Question

我正在尝试设置父子层次结构，这里是相关的组件定义 - 我已将它们简化为仅显示层次结构的结构。

RootComponent.vue

<template>
    <ComponentA></ComponentA>
</template>

ComponentA.vue

<template>
    <!--...-->
    <ComponentB></ComponentB>
</template>

ComponentB.vue

<template>
    <!--Some standard html tags-->
    <ComponentA></ComponentA>
    <!--...-->
    <ComponentC></ComponentC>
</template>

ComponentC.vue

<template>
    <!--Some standard HTML tags-->
    <ComponentD></ComponentD>
</template>

问题是 ComponentA 中的 ComponentB 未呈现，控制台中显示以下错误消息：

<块引用>

未知的自定义元素：- 您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

ComponentA 和 ComponentB 的顶级实例正确呈现，只有向下一层嵌套的 ComponentA 没有呈现。

所有组件均使用 Vue.extend() 方法创建，并在其上定义了 name 属性。组件由 components: 属性

导入

ComponentA 导入 ComponentB

ComponentB 导入 ComponentA 和 ComponentC

编辑

组件 A 导入

import ComponentB from "./ComponentB.vue"
export default Vue.extend({
    name: "ComponentA",
    //...
    components: {
        ComponentB
    }
})

组件 B 导入

import ComponentA from "./ComponentA.vue"
import ComponentC from "./ComponentC.vue"
export default Vue.extend({
    name: "ComponentB",
    //...
    components: {
        ComponentA,
        ComponentC
    }
})

呈现的预期 HTML 结构

<ComponentA>
    <ComponentB>
        <ComponentA>
            <ComponentB>
                <ComponentC></ComponentC>
            </ComponentB>
        </ComponentA>
        <ComponentC></ComponentC>
    </ComponentB>
</ComponentA>

呈现的实际 HTML 结构

<ComponentA>
    <ComponentB>
        <!--ComponentA is missing here-->
        <ComponentC></ComponentC>
    </ComponentB>
</ComponentA>

我花了几个小时在网上搜索解决方案，但找不到任何解决问题的方法。任何指针都非常感谢。

使用 VueJS 递归嵌套组件

0 个答案: