vue递归组件使用

482 阅读1分钟

递归组件使用

  • 递归组件 需要给当前要递归的组件 提供一个name属性,并且可以在当前组件内,通过name来调用自己。
<template>
    <div>
        <template v-for='item in data'>
            <ul v-if='item.children' :key='item.id'>
                <li>{{item.name}}</li>
                <!--******-->
                <Sub v-if='item.children'></Sub>
                <!--******-->
            </ul>
            <li v-else :key='item.id'>{{item.name}}</li>
        </template>
        
    </div>
</template>
<script>
export default {
    name:'Sub',//*******
    props:{
        data:{
            type:Array,
            default: () => []
        }
    }
}
</script>