Vue核心技术-24,递归组件

一,前言

日常开发中,经常会用到一些递归组件,如:省市区的三联滚动,商品的多级分类等
这一篇介绍如何创建递归组件

二,递归组件

常见的递归组件一般有级联选择器和树形控件,他们都具有层级关系
利用组件递归就可以开发出具有层级关系的独立组件

例如:

在创建组件时,为组件设置name之后,就可以在组件模板中递归使用,创建递归组件了

<div id="app">
    <tree :lv="5"></tree>
</div>

<script type="text/javascript">
    Vue.component('tree',{
        // 为组件设置name后可以在template中使用组件,实现递归调用
        name:'tree',
        props: {
            lv:{
                type: Number,
                default: 1
            },
            flag:{
                type:String,
                default:'-'
            }
        },
        template:
        '<div>{{ flagLv }}{{ lv }}' +
            '<tree :lv="lv - 1" v-if="lv > 1" :flag="flagLv"></tree>' +
        '</div>',
        computed: {
            flagLv: function () {
                return this.flag + '-'
            }
        }
    });

    var vm = new Vue({
        el: '#app'
    })
</script>

运行结果:

--5
---4
----3
-----2
------1

以上递归组件的实例,实现了组件的递归使用
通过为组件设置name值,在组件模板中递归使用
并且在递归过程中进行传参,以及对新的层级使用计算属性累加分隔符

三,递归组件的使用注意

在自定义一个递归组件时,必须为组件设置一个终止递归的条件,不然会一直递归下去导致报错

四,结尾

本篇简单的介绍了递归组件的使用,在实际项目开发中很少使用,主要用于封装级联选择或树形组件