Vuejs：动态递归组件（树状结构）

Posted 2023-02-23

【中文标题】Vuejs：动态递归组件（树状结构）

【英文标题】：Vuejs: Dynamic Recursive components (Tree Like Structure)

【发布时间】：2018-07-26 09:50:51

【问题描述】：

我正在尝试制作一个调用自身“列表”版本的自定义组件。我不断收到错误

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

我已经包含了一个名称选项，如下所示，但这并不能解决问题。

知道它可能是什么吗？

TestCompList.vue

<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: Dynamic Recursive components

但似乎无法在此处应用解决方案。 最糟糕的是有时它似乎有效，有时却无效

帮助！我可能会错过什么？

【参考方案1】：

你有一个循环依赖。查看递归文档正下方的文档：Circular References Between Components。您需要添加一个 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>

【参考方案2】：

更易读的方法是使用Webpack’s asynchronous import

您只需将TestCompList.vue 的组件部分更改为：

        components: 
            TestComp: () => import('./TestComp.vue'),
        

【参考方案3】：

您的组件名称与您使用的标签不匹配

name: "TestComp",

<test-comp>

应该是：

name: "test-comp",

<test-comp>

【讨论】：

您是否对TestComp 和TestCompList 都进行了更改？

是的，我都做了

Vue 实际上并不关心这种情况，至少在.vue 文件中是这样。我不确定是否使用运行时版本。