递归组件

思路

组件在它的模板内可以递归地调用自己，只有当它有 name 选项时才可以。 在官网这句话就是关键定义组件是一定要有name属性。

效果

代码

父组件

<template>
  <div>
    <el-menu style="width: 200px">
        <diguiComponet v-for="(model, index) in diguidata" :model="model" :key="index"/>
      </el-menu>
  </div>
</template>

<script>
var diguidata = [{
      "id": "1",
      "data": {
          "menuName": "项目管理",
          "menuCode": "",
      },
      "childTreeNode": [{
          "data": {
              "menuName": "项目",
              "menuCode": "BusProject",
          },
          "childTreeNode": [
            {
              "data": {
                  "menuName": "项目的儿子",
                  "menuCode": "BusProject",
              },

}
          ]
      }, {
          "data": {
              "menuName": "我的任务",
              "menuCode": "BusProject",
          },
          "childTreeNode": []
      }, {
          "data": {
              "menuName": "人员周报",
              "menuCode": "BusProject",
          },
          "childTreeNode": []
      }]
  }, {
      "id": "2",
      "data": {
          "menuName": "数据统计",
          "menuCode": "BusClock",
      },
      "childTreeNode": []
  }, {
      "id": "3",
      "data": {
          "menuName": "人事管理",
          "menuCode": "",
      },
      "childTreeNode": []
  }, {
      "id": "4",
      "data": {
          "menuName": "基础管理",
          "menuCode": "",
      },
      "childTreeNode": []
}]

import diguiComponet from './diguiComponet'

export default {
  components: {
    diguiComponet
  },
  data() {
    return {
      diguidata,
    }
  },
}
</script>

<style>

</style>

子组件

<template>
  <div>
    <el-menu-item v-if="!model.childTreeNode || model.childTreeNode.length === 0">
      {{model.data && model.data.menuName}}
    </el-menu-item>
    <el-submenu v-else ref="subMenu"  popper-append-to-body>
      <template slot="title">
        {{model.data && model.data.menuName}}
      </template>
      <diguiComponet v-for="(item, index) in model.childTreeNode" :model="item" :key="index"></diguiComponet>
    </el-submenu>
  </div>
</template>

<script>

export default {
  name: 'diguiComponet',
  props: ['model'],
  data() {
    return {
      data,
    }
  },
  created() {
    console.log('model', this.model);
  }
}
</script>

<style>

</style>