vue 递归组件 及动态样式的实现

需求： 列表的层级是不定的！常用的情况是，级联选择器，和树形控件。

递归组件：指组件在模版中调用自己，开启递归的条件就是组件中设置name选项。

 组件list递归组件: 父级无论多少数据，都可以完美自适应加载

<template>
	<div class="boxwrapper">
		<div class="list-item" v-for="(item,index) in list" :key="index">
		    <div class="item-name">
		    	{
   
   {item.name}}
		    </div>
		    <div v-if="item.children" class="children-item" :style="styleObj">
		    	<list :list="item.children"></list>
		    </div>

		</div>
	</div>
</template>

<script>
export default {
    name:"List",
    props:{
    	list:Array
    },
    data() {
        return {
            styleObj:{'margin-left':'20px', 'font-size':"16px"}
        }
    }
}
</script>
<style lang="stylus" scoped>
	.boxwrapper
		border:1px dotted #ccc;
		.list-item 
			background: #fff
			height: 100%
</style>

 父级：

<template>
    <div class="recursiveComponent">
		<list :list="list"></list>
    </div>
</template>

<script>
import List from './common/List.vue'
export default {
    name:"recursiveComponent",
    components:{ List },
    data() {
        return {
            list: [
            {
                name: "一级",
                children: [
                {
                    name: "二级",
                    children: [
                    {
                        name: "2——1——1"
                    }, {
                        name: "2——1——2"     
                    }]
                }, 
                {
                    name: "二级",
                    children: [
                    {
                        name: "2——1——3"
                    }, {
                        name: "2——1——4"     
                    }]

                }]
            },
            {
                name: "一级",
                children: [
                {
                    name: "二级",
                    children: [
                    {
                        name: "2——1——5"
                    }, 
                    {
                        name: "三级",
                        children: [{
                           name: "3——1——1"
                        }, {
                           name: "3——1——1"     
                        }]  
                    }]
                }, 
                {
                    name: "二级",
                    children: [
                    {
                        name: "2——1——7"
                    }, {
                        name: "2——1——8"     
                    }]

                }]
            },

            ]
        }
    }
}
</script>
<style lang="stylus" scoped>
    .recursiveComponent {
    	
    }
</style>

动态样式：用:style的方式 记得style前面加冒号。样式写在data里面即可