Vuejs:动态递归组件(树状结构)

Question

我正在尝试创建一个自定义组件来调用自己的"列表"版本.我一直在收到错误

未知的自定义元素: - 您是否正确注册了组件？对于递归组件,请确保提供"名称"选项.

我已经包含了一个名称选项,如下所示,但这并没有解决问题.

知道它可能是什么？

TestCompList.vue < - List组件

<template>
    <div>
        <p>I am a list</p>

        <template v-for="block in blocks">
            <test-comp :name="block.name" :header="block.name" :more="block.more" :key="block.id"></test-comp>
        </template>
    </div>
</template>

<script>
import TestComp from './TestComp';
export default {
    name: "TestCompList",
    components: {
        TestComp
    },
    props: ['blocks'],
}
</script>

TestComp.vue <---单一组件

<template>
    <div>
        <h3>{{header}}</h3>
        <p>{{name}}</p>
        <div class="mr-5" v-if="more">
            <test-comp-list :blocks="more"></test-comp-list>
        </div>
    </div>
</template>

<script>
import TestCompList from './TestCompList';
export default {
    name: "TestComp",
    props: ['header', 'name', 'more'],
    components: {
        TestCompList
    }
}
</script>

Page.vue < - 传递数据的页面

<template>
    <div>
       <h3>Testing Recursive components</h3>

       <test-comp-list :blocks="blocks"></test-comp-list>
    </div>
</template>

<script>
import TestCompList from "./TestCompList";
export default {
  components: {
    TestCompList
  },
  data() {
    return {
      blocks: [
        {
          id: 1,
          name: "test1",
          header: "test1Header"
        },
        {
          id: 2,
          name: "test2",
          header: "test2Header"
        },
        {
          id: 3,
          name: "test3",
          header: "test3Header",
          more: [
            {
              id: 4,
              name: "test4",
              header: "test4Header"
            },
            {
              id: 5,
              name: "test5",
              header: "test5Header",
              more: [
                {
                  id: 6,
                  name: "test6",
                  header: "test6Header"
                },
                {
                  id: 7,
                  name: "test7",
                  header: "test7Header"
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

有任何想法吗？我在这里解决了类似的问题 - > Vuejs:动态递归组件

但似乎无法在这里应用解决方案.最糟糕的部分有时似乎有效,有时则不然

救命!我能错过什么？

Answer 1

你有一个循环依赖.查看递归文档正下方的文档:组件之间的循环引用.您需要添加一个beforeCreate钩子以在加载时拉入子依赖项.

这不是你想到的递归问题,因为如果它是递归的,那么组件会试图调用它自己.相反,它试图声明对组件的依赖,而组件又依赖于试图声明依赖关系的组件; 因此"循环".

实际上,vue-loader由于您的依赖关系图如下所示,它不知道该怎么做:

Page -> TestCompList -> TestComp -> TestCompList -> TestComp -> ...

正如文档所说,如果你在全球范围内注册这些组件,那么这不会成为问题(但是你会有一个不必要的广泛的依赖结构).在没有全局注册的情况下修复此问题的方法是让其中一个组件在beforeCreate钩子中在运行时声明它的依赖性要求.

新 TestCompList.vue

<template>
    <div>
        <p>I am a list</p>

        <template v-for="block in blocks">
            <TestComp :name="block.name" :header="block.name" :more="block.more" :key="block.id"></TestComp>
        </template>
    </div>
</template>

<script>
    export default {
        name: "TestCompList",
        props: ['blocks'],
        beforeCreate: function(){
            this.$options.components.TestComp = require("./TestComp.vue").default;
        }
    }

</script>