vue组件递归的一些理解

自己做个小项目练手，需要用到组件递归，网上查了一些资料，每个代码片段都认识，但是连起来，就一团浆糊。

既然人傻就多思考吧。不明白的点有以下：

1.组件怎么自己调用自己，函数的递归是就是在function fn(){ fn() },组件的递归没有看到这样子的呀。

答：组件中使用name属性，给组件自己定义个名字，这样在组件中就可以自己调用自己了。就像在函数中直接调用函数名来来递归。

2.组件的递归中一层又一层数据是如何获取到的？

答：将嵌套的数据重新赋值给prop设置的属性。

 <tree-menu v-for="(item,index) in model.children"  v-bind:model="item" v-bind:key="index"></tree-menu>

3.组件递归是怎么结束的？

判断数据中是否存在属性，以及该属性的值不为空。见下面代码中的haschild方法。

      hasChild(){
        return this.model.children && this.model.children.length
      }

 

下面的代码来自https://www.jianshu.com/p/84eb67487113

准备数据文件——testdata.js

var demoData = [
  {
    'id': '1',
    'menuName': '基础管理',
    'menuCode': '10',
    'children': [
      {
        'menuName': '用户管理',
        'menuCode': '11'
      },
      {
        'menuName': '角色管理',
        'menuCode': '12',
        'children': [
          {
            'menuName': '管理员',
            'menuCode': '121'
          },
          {
            'menuName': 'CEO',
            'menuCode': '122'
          },
          {
            'menuName': 'CFO',
            'menuCode': '123'
          },
          {
            'menuName': 'COO',
            'menuCode': '124'
          },
          {
            'menuName': '普通人',
            'menuCode': '124'
          }
        ]
      },
      {
        'menuName': '权限管理',
        'menuCode': '13'
      }
    ]
  },
  {
    'id': '2',
    'menuName': '商品管理',
    'menuCode': ''
  },
  {
    'id': '3',
    'menuName': '订单管理',
    'menuCode': '30',
    'children': [
      {
        'menuName': '订单列表',
        'menuCode': '31'
      },
      {
        'menuName': '退货列表',
        'menuCode': '32',
        'children': []
      }
    ]
  },
  {
    'id': '4',
    'menuName': '商家管理',
    'menuCode': '',
    'children': []
  }
];

export default  demoData;

View Code