2021-07-07 vue 递归组件的调用

递归组件的调用

1，递归的组件，在调用自身的时候，可以通过 export default 里面的 name 来调用自身

eg: 子组件，child组件

<template>
	<ul v-for="(item,index) in list" :key="index">
			<li>{{item}}</li>
			<child v-if='index==5' :list='item.clist'></child>    /* 通过name，来调用自身的子组件，实现递归循环*、
	</ul>
</template>

<script>
export default {
	  name: "child",  // 通过name，来调用自身的子组件，实现递归循环
	  props: {
			list: {     //接收父组件传值,并设置默认值
				type: Array,
				default: ()=>[]  
		}
	},
	data() {
		return {
			tableData: []
		}
	}
}
</script>

父组件调用

<template>
	<div>
			<child :list='tableData'></child>
	</div>
</template>

<script>
import child from "./child";
export default {
	  name: "parent"
	},
	components: {
		'child'
	},
	data() {
		return {
			tableData: []
		}
	}
}
</script>