vue递归组件-笔记

递归组件

递归 ：调用自身的编程 = 递归

需要给递归设置一个边界条件，用这个边界条件判断是否继续递归下去

如果不设置判断条件，将会无限递归，

递归组件 = 递归 + 组件

组件在边界条件内不断调用自己，直到超出边界条件为止

树组件 ， 左侧导航栏 ，多级表格（嵌套表格）

最开始前端并不知道这个导航有多少个层级

获取后端数据 ，在导航组件中设置递归边界，渲染数据

注册一个全局组件

<RootNav :list='navList'/>

在全局获取navList数据 ， 传递给组件

在组件中接收数据 props

const props = defineProps({

  list: {

    type:Array ,

    default:()=>[]

  }

})

//数据中children就是子菜单的意思

根据这个字段判断要不要继续递归 ，这个就是边界条件

<ul>

<template v-for='item in list'>

<li>{{item.name}}</li>

<RootNav :list='item.children' v-if='item.children.length > 0'/>

{/* 或者 v-if="'children' in item" */}

</template>

‘children’ in item 意思是item对象中是否有children属性