Vue递归组件

1.简单描述

递归组件：在父组件内嵌套子组件，子组件无限循环使用自己，用于树状结构的嵌套

2.代码

(1).分为子组件Son和父组件Father(这里的话我写的是顶级只能有一个根元素)

Father.vue文件

<template>
	<ul>
		<li>第一层级</li>
		<Son :list='list'/>
	</ul>
</template>
<script>
export default {
name: 'father',
data () {
	return {
		list:[
			{
				text:'第一层',
				expand:false,
				children:[
					{
						text:'第二层',
						expand:false,
						children:[]
					}
				]
			}
		]
	}
}
}
</script>

Son.vue文件

<template>
	<ul class='son'>
		<li v-for="item in list">第一层级</li>
		<Son :list='item.child' v-if='list.length'/>
	</ul>
</template>
<script>
export default {
name: 'son',
props: ['list'],
}
</script>

2.添加一些事件

主要是通过子父和父子通信，如果该一整个作为一个组件，同时涉及和其他页面数据的操作，最好用vuex去管理整个状态