时间戳

首页 > 解决方案 > 使用 VueJS 递归嵌套组件

javascript - 使用 VueJS 递归嵌套组件

问题描述

我正在尝试建立一个父子层次结构，这里是相关的组件定义——我已经将它们简化为只显示层次结构的结构。

根组件.vue

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

组件A.vue

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

组件B.vue

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

组件C.vue

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

问题是ComponentAinsideComponentB没有渲染，并且控制台中显示以下错误消息：

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

正确渲染的顶级实例只是嵌套的ComponentA下一层不渲染。ComponentBComponentA

所有组件都是使用该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>

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

标签： javascripthtmlvue.jsrecursion

解决方案

推荐阅读