vue 循环 递归组件_【求助】vue组件递归调用异常问题

问题描述

组件A里面引用组件B，组件B同时又引用组件A，就这么简单，但是总是报如下错误：

[Vue warn]: Failed to mount component: template or render function not defined

最小复现代码

index.vue：

.test-node {

border: solid 1px #aaa;

margin: 8px;

padding: 8px;

}

测试Vue组件递归循环调用：

import Nodes from './nodes';

export default {

components: {

Nodes,

},

data() {

return {

nodes: [

{name: 'function', id: 1},

{name: 'hsf', id: 2},

{name: 'loop', id: 3, children: [

{name: 'child1', id: 4},

{name: 'child2', id: 5},

]},

{name: 'test', id: 6},

]

}

}

}

nodes.vue：

import Node from './node';

export default {

components: {

Node,

},

name: 'nodes',

props: {

nodes: Array

},

}

node.vue：

{{node.name}}

import Nodes from './nodes';

export default {

components: {

Nodes,

},

props: {

node: Object

},

}

结果

期望效果：

实际效果：

并且控制台报错：

已知没问题的写法

丢弃node.vue，把node.vue的代码copy到nodes.vue里面就没问题：

修改后的nodes.vue：

{{node.name}}

import Node from './node';

export default {

components: {

Node,

},

name: 'nodes',

props: {

nodes: Array

},

}

待解决

至于为什么分开写会报错，找了1天了还没找到原因，如果有知道的欢迎评论指出！跪谢！