vue组件递归、组件相互依赖问题解决

组件递归:
	1、设置组件name名称
	
	2、在模板中直接使用
		<名称 />
		xx-Yy的名称要写成<xxyy />
	
	3、使用时传入参数的方式和组件在其他组件中使用相同,注意递归终止条件
		<xx :props="props">  倘若组件需要传参数

组件依赖:
	两个组件称为A和B,首先A依赖B,但是B又依赖 A,但是A又依赖B,这变成了一个循环,不知道如何不经过其中一个组件而完全解析出另一个组件。
	解决方式一:
		在生命周期钩子beforeCreate时去注册不需要解析的组件:
		beforeCreate: function () {
		  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
		}
			
	解决方式二:
		使用异步方式导入组件:q
		components: {
		  TreeFolderContents: () => import('./tree-folder-contents.vue')
		}

代码示例:
数据:

list: [{
    name: "经济",
    children: [{
        name: "如家"
    }, {
        name: "7天"     
    }]
}, {
    name: "舒适",
    children: [{
        name: "智选假日"
    }, {
        name: "全季"     
    }]
}]

渲染结果:

引入递归组件:

<template>
    <div class="list-detail">
      <list :list="list"></list>
    </div>
</template>
<script>
import List from "./components/List";
export default {
  name: "Parent",
  components: { List },
  data() {
    return {
      list: [{
          name: "经济",
          children: [{
              name: "如家",
              children: [{
                  name: "上江路-如家"
                },
                {
                  name: "望江路-如家"
                }]
            },{
              name: "7天",
              children: [{
                  name: "长江路-7天"
                },
                {
                  name: "望江路-7天"
                }]
            }]
        }]
    }
  }
}
</script>

递归组件:

<template>
    <div>
        <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-name">
                <span>{{item.name}}</span>
            </div>
            <div v-if="item.children" class="children-item">
            	//递归处
                <list :list="item.children"></list>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "List",
  props: {
    list: Array
  }
};
</script>

转载于：vue 组件递归、组件相互依赖问题_vue递归循环依赖_神奇大叔的博客-CSDN博客