vue递归组件使用

之前vue项目中用到递归组件，写过了没来得及整理，递归组件就是组件调用本身，利用name属性注册，还有父子传值知识
第一步：创建父组件
<template>
	<div>
	//引用子组件 通过list 传值给子组件
		<Diguichild :list="list"></Diguichild>
	</div>
</template>
<script>
	import Diguichild from './diguichild'
	export default {
		data() {
			return {
				list: [{
					"title": "金毛",
					"children": [{
						"title": "大金毛",
						"children": [{
							"title": "小金毛"
						}]
					}, {
						"title": "小萨”
					}]
				}, {
					"title": "拉布拉多"
				}, {
					"title": "边牧"
				}, {
					"title": "喜乐蒂"
				}]
			}
		},
		components: {
			Diguichild
		}
	}
	
</script>
子组件：//通过props接收值 用v-for循环渲染
<template>
	<div>
	<div v-for="(item,index) in list" :key="index">
		{{item.title}}
		//v-if判断数据是否有children选项，将数据传给list
			<div v-if="item.children ">
		   <Diguichild :list="item.children"></Diguichild>
	   </div>
	</div>
	</div>
</template>
<script>
	export default{
		name:'Diguichild',
		props:{
			list:Array
		}
	}
</script>