Vuejs：动态递归组件（树状结构） [英] Vuejs: Dynamic Recursive components (Tree Like Structure)
问题描述
我正在尝试制作一个自定义组件，以调用其自身的列表版本。我不断收到错误消息
未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供名称选项。
我已经包括了一个名称选项，如下所示，但这不能解决问题。 / p>
知道什么可能吗？
TestCompList.vue <-列表组件
< template>
< div>
< p>我是列表< / p>
<模板v-for =块中的块>
< test-comp：name = block.name：header = block.name：more = block.more：key = block.id< / test-comp>
< / template>
< / div>
< / template>
< script>
从 ./TestComp导入TestComp；
导出默认值{
名称： TestCompList，
组件：{
TestComp
}，
道具：['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>
从 ./TestCompList导入TestCompList；
导出默认值{
名称： TestComp，
道具：['header'，'name'，'more']，
组件：{
TestCompList
}
}
< / script>
Page.vue <-页面传递数据
< template>
< div>
< h3>测试递归组件< / h3>
< test-comp-list：blocks = blocks>< / test-comp-list>
< / div>
< / template>
< script>
从 ./TestCompList导入TestCompList；
导出默认值{
组件：{
TestCompList
}，
data（）{
return {
块：[
{
id：1，
名称： test1，
标头： test1Header
}，
{
id：2，
名称： test2，
标头： test2Header
}，
{
id：3，
名称： test3，
标头：： test3Header，另外
：[
{
id：4，
名称： test4，
标头： test4Header
}，
{
id：5，
名称： test5，
标头： test5Header，
更多：[
{
id ：6，6，
名称： test6，
标头： test6Header
}，
{
id：7，
名称： test7，
标头： test7Header
}
]
}
]
}
]
};
}
};
< / script>
有什么想法吗？
我在这里解决了类似的问题-> Vuejs：动态递归组件
但似乎无法在此处应用该解决方案。
最糟糕的部分是有时似乎可以工作，有时却不起作用
帮助！我可能会缺少什么？
您有循环依赖项。请在递归文档的正下方查看文档：组件之间的循环引用。您需要添加一个 beforeCreate 钩子，以在加载时获取子依赖项。
您认为的递归问题，因为如果是递归的，则组件将尝试调用自身。相反，它试图声明对组件的依赖关系，而组件又对试图声明依赖关系的组件具有依赖关系；
有效地， vue-loader 不知道该怎么做，因为您依赖了图形如下：
页面-> TestCompList-> TestComp-> TestCompList-> TestComp-> ...
正如文档所说，如果您在全球范围内注册了这些组件，这将不是问题（但是这样您将拥有不必要的广泛依赖关系结构）。修复此无需全局注册的方法是，在运行时通过 beforeCreate 挂钩让组件之一声明其对依赖项的要求。
新建 TestCompList.vue
< template>
< div>
< p>我是列表< / p>
<模板v-for =块中的块>
< TestComp：name = block.name：header = block.name：more = block.more：key = block.id>< / TestComp>
< / template>
< / div>
< / template>
< script>
导出默认值{
名称： TestCompList，
道具：['blocks]，
beforeCreate：function（）{
this。$ options.components。 TestComp = require（ ./ TestComp.vue）。default;
}
}
< / script>
I am trying to make a custom component that calls the 'list' version of itself. i keep getting an error
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I have included a name option as you can see below but this doesn't solve the problem.
Any idea what it could be?
TestCompList.vue <-- The List component
<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 <--- The Single component
<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 <-- The page passing the data
<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>
Any ideas? I solved a similar problem here -> Vuejs: Dynamic Recursive components
But can't seem to apply the solution here. Worst part is sometimes it seems to work and sometimes it doesn't
Help! What could i be missing?
You have a circular dependency. Look at the documentation directly below the recursive documentation: Circular References Between Components. You need to add a beforeCreate hook to pull in the child dependency at load time.
This isn't quite the recursive problem that you thought, because if it was recursive, the component would be trying to call itself. Instead it's trying to declare a dependency on a component that, in turn, has a dependency on the component that is trying to declare the dependency; hence the "circular".
Effectively, the vue-loader doesn't know what to do since your dependency graph looks like:
Page -> TestCompList -> TestComp -> TestCompList -> TestComp -> ...
As the docs say, this wouldn't be a problem if you registered these components globally (but then you would have an unnecessarily broad dependency structure). The way to fix this without registering globally, is to have one of the components state it's dependency requirement at runtime in a beforeCreate hook.
New 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>
这篇关于Vuejs：动态递归组件（树状结构）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
