vue组件递归

vue中，组件可以通过name选项实现在自身模板中调用自身

何时用到递归组件：当后台返回数据结构呈现树状结构，且页面渲染内容相同

   // 递归组件必须具备一个结束或渲染的条件，不然就会造成组件一直循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。所以，我们得使用v-if，给出一个条件作为递归组件渲染的条件。当不满足v-if条件时，组件将不会再进行渲染。

<template>
	<div>
		<Row :key="key" >
			<Col v-for="(item,index) in attributeData" :key="index" style="margin-bottom: 10px;">
				<!-- 输入框 -->
				<div v-if="item.type === 'input'">
					{{item.attrName}}
					<Input type="text"  v-model="form[item.attribute]" :placeholder="'请输入'+item.attrName" @on-change="changeEvent(item, form[item.attribute])" style="width: auto"></Input>
				</div>
				<!-- 下拉框 -->
				<div v-if="item.type === 'select'">
					{{item.attrName}}
					<SelectDeal :attribute="form[item.attribute]" :item="item" @on-change="changeEvent(item, form[item.attribute])"></SelectDeal>
				</div>
				<!-- 颜色码 -->
				<div v-if="item.type === 'takeColor' && form[item.attribute] !== undefined">
					{{item.attrName}}
					<colorPicker v-model="form[item.attribute]" v-on:change="changeEvent(item, form[item.attribute])" :key="colorKey"/>
				</div>
				<!-- 数字输入框 -->
				<div v-if="item.type === 'numbeInput'">
					{{item.attrName}}
					<NumberInput :attribute="form[item.attribute]" :item="item"></NumberInput >
				</div>
				<!-- 单选框 -->
				<div v-if="item.type === 'radio'">
					{{item.attrName}}
					<RadioDeal :attribute="form[item.attribute]" :item="item"></RadioDeal>
				</div>
				<!-- 数组输入框 -->
				<div v-if="item.type === 'array'">
					{{item.attrName}}
					<ArrayDeal :attribute="form[item.attribute]" :item="item"></ArrayDeal>
				</div>
				<!-- 递归组件 -->
				<div v-if="item.chartConfigDtoList.length>0">
					{{item.attrName}}
					<input-mode v-if="item.chartConfigDtoList.length>0" :attributeData="item.chartConfigDtoList"  style="margin-left: 20px;margin-top:10px;"></input-mode>
				</div>
			</Col>
		</Row>
	</div>
</template>

<script>
import NumberInput from '@/components/public/NumberInput'
import SelectDeal from '@/components/public/selectDeal'
import RadioDeal from '@/components/public/radioDeal'
import ArrayDeal from '@/components/public/ArrayDeal'
import bus from '@/components/public/bus'
export default {
	name: 'inputMode',
	props: {
		module: String,
		attributeData: Array
	}
	}

这里，根据后台返回数据，判断每条数据以何种方式展示，并且每条数据中都具有chartConfigDtoList属性，所以可以根据chartConfigDtoList数组不为空作为渲染条件